盒模型的屬性丶display顯示丶浮動

一丶盒模型的屬性(重要)

　　1.padding

　　　　padding是標準文檔流,父子之間調整位置

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>padding</title>
<style>
*{
padding: 0;
margin: 0;
}
.box{
width: 200px;
height: 200px;
background-color: red;
/*上下左右*/
padding: 10px;
/*上下  左右*/
padding: 20px 30px;
/*上  左右  下*/
padding: 20px 30px 40px;
/*順時針   上右下左*/
padding: 20px 30px 40px 50px;
}
</style>
</head>
<body>
<div class="box">alex</div>
</body>
</html>
padding

　　2.border

　　　　三要素:?線性的寬度? 線性的樣式? 顏色

　　　　solid?實線　　dotted小圓點　　double雙實線　　bottom虛線

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>border</title>
<style>
*{
padding: 0;
margin: 0;
}
.box{
width: 200px;
height: 200px;
background-color: red;
/*根據方向來設置*/
border-left: 5px solid green;
border-right: 1px dotted yellow;
border-top: 5px double purple;
border-bottom: 1px dashed;
}
</style>
</head>
<body>
<div class="box">alex</div>
</body>
</html>
border

　　實例:制作三角形

　　transparent?透明

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>制作三角形</title>
<style type="text/css">
div{
width: 0;
height: 0;
border-bottom: 20px solid red;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
}
</style>
</head>
<body>
<div>
</div>
</body>
</html>
制作三角形

　　3.margin

　　　　前提:必須是在標準文檔流下

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>margin</title>
<style>
.s1{
background-color: red;
margin-right: 30px;
}
.s2{
background-color: rgb(0,128,0);
margin-left: 30px;
}
</style>
</head>
<body>
<span class="s1">alex</span><span class="s2">wusir</span>
</body>
</html>
margin

　　margin垂直方向上的坑:

　　　　margin的水平不會出現任何問題

　　　　垂直方向上?margin會出現'塌陷問題'

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>margin坑</title>
<style>
.s1{
width: 200px;
height: 200px;
background-color: red;
margin-bottom: 40px;
}
.s2{
width: 200px;
height: 200px;
background-color: green;
margin-top: 100px;
}
</style>
</head>
<body>
<div class="s1"></div>
<div class="s2"></div>
</body>
</html>
margin(坑) 
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>margin父子盒子的坑</title>
<style type="text/css">
.box{
width: 300px;
height: 300px;
background-color: red;
/*float: left;*/
}
.child{
width: 100px;
height: 100px;
background-color: green;
margin-left: 50px;
margin-top: 50px;
}
</style>
</head>
<body>
<div class="father">
<div class="child">
</div>
</div>
</body>
</html>
margin父子盒子的坑

?

?二丶display顯示

　　前提;必須是在標準文檔流下

　　塊級元素和行內元素的相互轉換:

　　　　塊級元素可以轉換為行內元素:

　　　　　　display:inline

　　　　　　此時這個div不能設置寬度丶高度;

　　　　　　此時這個div可以和別人并排了

　　　　行內元素轉換為塊級元素:

　　　　　　display:block

　　　　　　此時這個span能夠設置寬高

　　　　　　此時這個span必須霸占一行了,別人無法和他并排

　　　　　　如果不設置寬度,將撐滿父親

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>display</title>
<style>
.box{
width: 100px;
height: 100px;
background-color: red;
border: 1px solid yellow;
}
div a{
display: block;
width: 100px;
height: 100px;
}
span{
display: inline-block;
width: 300px;
height: 200px;
background-color: yellow;
}
</style>
</head>
<body>
<div class="box">alex</div>
<div class="box">wusir</div>
<div>
<a href="#">
<img src="http://img07.tooopen.com/images/20170818/tooopen_sy_220999936848.jpg" alt="" width="300" height="300"/>
</a>
</div>
<input type="text" /><br />
<span>哈哈哈哈</span>
<span>嘻嘻嘻嘻</span>
</body>
</html>
display

?

三丶浮動

　　float :? ? none? 表示不浮動,默認

　　　　　? left:表示左浮動

　　　　　? right:表示右浮動

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>浮動</title>
<style>
*{
padding: 0;
margin: 0;
}
.father{
width: 500px;
}
.box1{
width: 100px;
height: 100px;
background-color:red;
float: left;
}
.box2{
width: 100px;
height: 300px;
background-color:green;
float: left;
}
.box3{
width: 100px;
height: 100px;
background-color:blue;
float: left;
}
.father2{
width: 600px;
height: 200px;
background-color: yellow;
}
</style>
</head>
<body>
<div class="father">
<div class="box1">1</div>
<div class="box2">2</div>
<div class="box3">3</div>
</div>
<div class="father2">
</div>
</body>
</html>
浮動

　　我們該如何清除浮動呢?有以下幾種方法

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>清除浮動</title>
<style>
*{
padding: 0;
margin: 0;
}
.father{
width: 500px;
height: 300px;
}
.box1{
width: 100px;
height: 100px;
background-color:red;
float: left;
}
.box2{
width: 100px;
height: 300px;
background-color:green;
float: left;
}
.box3{
width: 100px;
height: 100px;
background-color:blue;
float: left;
}
.father2{
width: 600px;
height: 200px;
background-color: yellow;
}
</style>
</head>
<body>
<div class="father">
<div class="box1">1</div>
<div class="box2">2</div>
<div class="box3">3</div>
</div>
<div class="father2">
</div>
</body>
</html>
固定高度 
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>清除浮動</title>
<style>
*{
padding: 0;
margin: 0;
}
.father{
width: 500px;
}
.box1{
width: 100px;
height: 100px;
background-color:red;
float: left;
}
.box2{
width: 100px;
height: 300px;
background-color:green;
float: left;
}
.box3{
width: 100px;
height: 100px;
background-color:blue;
float: left;
}
.father2{
width: 600px;
height: 200px;
background-color: yellow;
}
.clearfix{
clear:both;
}
</style>
</head>
<body>
<div class="father">
<div class="box1">1</div>
<div class="box2">2</div>
<div class="box3">3</div>
<!-- 內墻法 -->
<div class="clearfix"></div>
</div>
<div class="father2">
</div>
</body>
</html>
clearfix內墻法

?　　　　?visibility:hidden;?設為隱藏

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>偽元素清除法</title>
<style>
*{
padding: 0;
margin: 0;
}
.father{
width: 500px;
}
.box1{
width: 100px;
height: 100px;
background-color:red;
float: left;
}
.box2{
width: 100px;
height: 300px;
background-color:green;
float: left;
}
.box3{
width: 100px;
height: 100px;
background-color:blue;
float: left;
}
.father2{
width: 600px;
height: 200px;
background-color: yellow;
}
.clearfix:after{
content: '.';
clear: both;
display: block;
visibility: hidden;
height: 0;
}
</style>
</head>
<body>
<div class="box">
<div class="father clearfix">
<div class="box1">1</div>
<div class="box2">2</div>
<div class="box3">3</div>
</div>
</div>
<div class="father2"></div>
</body>
</html>
偽元素清除法 
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>偽元素清除法</title>
<style>
*{
padding: 0;
margin: 0;
}
.father{
width: 500px;
overflow: hidden;
}
.box1{
width: 100px;
height: 100px;
background-color:red;
float: left;
}
.box2{
width: 100px;
height: 300px;
background-color:green;
float: left;
}
.box3{
width: 100px;
height: 100px;
background-color:blue;
float: left;
}
.father2{
width: 600px;
height: 200px;
background-color: yellow;
}
</style>
</head>
<body>
<div class="box">
<div class="father">
<div class="box1">1</div>
<div class="box2">2</div>
<div class="box3">3</div>
</div>
</div>
<div class="father2"></div>
</body>
</html>
overflow清除法

?

本文來自互聯網用戶投稿，該文觀點僅代表作者本人，不代表本站立場。本站僅提供信息存儲空間服務，不擁有所有權，不承擔相關法律責任。
如若轉載，請注明出處：http://www.pswp.cn/news/371174.shtml
繁體地址，請注明出處：http://hk.pswp.cn/news/371174.shtml
英文地址，請注明出處：http://en.pswp.cn/news/371174.shtml

如若內容造成侵權/違法違規/事實不符，請聯系多彩編程網進行投訴反饋email:809451989@qq.com，一經查實，立即刪除！

相關文章

MapReduce：通過數據密集型文本處理

MapReduce：通過數據密集型文本處理

自上次發布以來已經有一段時間了&#xff0c;因為我一直在忙于Coursera提供的一些課程。 有一些非常有趣的產品&#xff0c;值得一看。 前一段時間&#xff0c;我購買了Jimmy Lin和Chris Dyer的MapReduce數據密集型處理程序 。 本書以偽代碼格式介紹了幾種關鍵的MapReduce算法。…
閱讀更多...
ubuntu(deepin)安裝apache2并支持php7.0

ubuntu(deepin)安裝apache2并支持php7.0

linux虛擬機下用于開發環境測試&#xff0c;安裝的apache和php7.0&#xff0c;但是簡單安裝完兩者后apache并不能解析php&#xff0c;原因是確實apache的php擴展。 # 首先安裝apache sudo apt-get install apache2 # 然后安裝php7.0 sudo apt-get install php7.0 # 一般執行完這…
閱讀更多...
java applet 換行_Java復習題

java applet 換行_Java復習題

一、選擇題1.有Java語句如下&#xff0c;則說法正確的是()A.此語句是錯誤的B. a.length的值為5C. b.length的值為5D. a.length和b.length的值都為52.整數除法中&#xff0c;如果除數為0&#xff0c;則將導致的異常是( B )A. NullPointerExceptionB. ArithmeticExceptionC. Arra…
閱讀更多...
解決：MVC對象轉json包含\r \n

解決：MVC對象轉json包含\r \n

項目中對象轉json字符串時&#xff0c;如下&#xff1a;JsonSerializerSettings jsetting new JsonSerializerSettings(); jsetting.DefaultValueHandling DefaultValueHandling.Ignore; return JsonConvert.SerializeObject(resultMoldels, Formatting.Indented, jsetting);…
閱讀更多...
CSS 小結筆記之滑動門技術

CSS 小結筆記之滑動門技術

所謂的滑動門技術&#xff0c;就是指盒子背景能夠自動拉伸以適應不同長度的文本。即當文字增多時&#xff0c;背景看起來也會變長。 大多數應用于導航欄之中&#xff0c;如微信導航欄: 具體實現方法如下&#xff1a; 1、首先每一塊文本內容是由a標簽與span標簽組成 <a hr…
閱讀更多...
使用API??身份驗證的Spring Security

使用API??身份驗證的Spring Security

背景 盡管有許多博客文章詳細介紹了如何使用Spring Security&#xff0c;但是當問題域位于標準LDAP或數據庫身份驗證之外時&#xff0c;我仍然經常發現配置挑戰。 在本文中&#xff0c;我將介紹一些針對Spring Security的簡單自定義&#xff0c;使其能夠與基于REST的API調用一起…
閱讀更多...
java nlpir_4-NLPIR漢語分詞系統-JAVA

java nlpir_4-NLPIR漢語分詞系統-JAVA

好吧&#xff0c;之前用的是舊版的&#xff0c;現在出了個新版的&#xff0c;優先選擇用新版的哈。從官網下載相應的開發包&#xff0c;然后主要需要找到這幾個東西添加到項目工程里面&#xff0c;1.Data文件夾 2.NLPIR_JNI.DLL 3.NLPIR.jar 4.nlpir.properties添加完那些東西后…
閱讀更多...
淺析C語言中assert的用法(轉）

淺析C語言中assert的用法(轉）

原文地址&#xff1a;http://www.jb51.net/article/39685.htm 以下是對C語言中assert的使用方法進行了介紹&#xff0c;需要的朋友可以參考下。 assert宏的原型定義在<assert.h>中&#xff0c;其作用是如果它的條件返回錯誤&#xff0c;則終止程序執行&#xff0c;原型定…
閱讀更多...
hihocoder offer收割編程練習賽12 D 尋找最大值

hihocoder offer收割編程練習賽12 D 尋找最大值

思路&#xff1a; 可能數據太水了&#xff0c;隨便亂搞就過了。 實現&#xff1a; 1 #include <iostream>2 #include <cstdio>3 #include <algorithm>4 using namespace std;5 typedef long long ll;6 7 int a[100005], n;8 9 int main() 10 { 11 int t;…
閱讀更多...
vue error:The template root requires exactly one element.

vue error:The template root requires exactly one element.

error:[vue/valid-template-root] The template root requires exactly one element. 原因&#xff1a; 因為vue的模版中只有能一個根節點&#xff0c;所以在<template>中插入第二個元素就會報錯 解決方案&#xff1a; 將<template>中的元素先用一個<div>…
閱讀更多...
測試驅動陷阱，第2部分

測試驅動陷阱，第2部分

單元測試中單元的故事 在本文的上半部分 &#xff0c;您可能會看到一些不好但很流行的測試示例。 但是我不是一個專業評論家&#xff08;也被稱為“巨魔”或“仇恨者”&#xff09;&#xff0c;沒有任何建設性的話就抱怨。 多年的TDD教給我的不僅僅是事情會變得多么糟糕。 有許…
閱讀更多...
java 代碼 設置環境變量_Java 配置環境變量教程

java 代碼 設置環境變量_Java 配置環境變量教程

【聲明】歡迎轉載&#xff0c;但請保留文章原始出處→_→【正文】1、安裝JDK開發環境開始安裝JDK&#xff1a;修改安裝目錄如下&#xff1a;確定之后&#xff0c;單擊“下一步”。注&#xff1a;當提示安裝JRE時&#xff0c;可以選擇不要安裝。2、配置環境變量&#xff1a;對于…
閱讀更多...
組合數據類型練習，英文詞頻統計實例上（2017.9.22）

組合數據類型練習，英文詞頻統計實例上（2017.9.22）

字典實例&#xff1a;建立學生學號成績字典&#xff0c;做增刪改查遍歷操作。 sno[33號,34號,35號,36號] grade[100,90,80,120] d{33號:100,34號:90,35號:80,36號:120} print(d) print(每個學號對應分數:,d.items()) print(彈出35號的分數:,d.pop(35號)) print(獲取學號:,d.key…
閱讀更多...
java 代碼中設置 臨時 環境變量

java 代碼中設置 臨時 環境變量

System.setProperty("hadoop.home.dir", "D:\\software\\software_install\\dev_install\\hadoop-2.4.1"); 轉載于:https://www.cnblogs.com/zychengzhiit1/p/6662376.html
閱讀更多...
什么是快速開發框架

什么是快速開發框架

什么是快速開發框架 前言 做為一個程序員&#xff0c;在開發的過程中會發現&#xff0c;有框架同無框架&#xff0c;做起事來是完全不同的概念&#xff0c;關系到開發的效率、程序的健壯、性能、團隊協作、后續功能維護、擴展......等方方面面的事情。很多朋友在學習搭建自己…
閱讀更多...
java中的math.abs_Java.math.BigDecimal.abs()方法

java中的math.abs_Java.math.BigDecimal.abs()方法

全屏Java.math.BigDecimal.abs()方法java.math.BigDecimal.abs()返回一個BigDecimal&#xff0c;其值是此BigDecimal的絕對值&#xff0c;其標度是this.scale()。聲明以下是java.math.BigDecimal.abs()方法的聲明public BigDecimal abs()參數NA返回值此方法返回的名為value&…
閱讀更多...
我需要多少內存

我需要多少內存

什么是保留堆&#xff1f; 我需要多少內存&#xff1f; 在構建解決方案&#xff0c;創建數據結構或選擇算法時&#xff0c;您可能會問自己&#xff08;或其他人&#xff09;這個問題。 如果此圖包含1,000,000條邊并且我使用HashMap進行存儲&#xff0c;此圖是否適合我的3G堆&am…
閱讀更多...
C語言程序設計預報作業

C語言程序設計預報作業

1閱讀鄒欣老師的博客--師生關系,針對文中的幾種師生關系談談你的看法&#xff0c;你期望的師生關系是什么樣的&#xff1f; 答&#xff1a;我認為文中的師生關系都存在一些缺陷&#xff0c;第一種師生關系是建立在病態關系上的&#xff0c;學生不是植物自然有自己的思想。所以我…
閱讀更多...
淺談23種設計模式

淺談23種設計模式

淺談23種設計模式 類之間的關聯關系&#xff1a;在使用Java、C#和C等編程語言實現關聯關系時&#xff0c;通常將一個類作為另一個類的屬性。 　　(1)雙向關聯&#xff0c;兩個類互相為各自的屬性&#xff0c;比如顧客類Customer和商品類Product&#xff0c;顧客擁有商品&#x…
閱讀更多...
網頁布局基礎

網頁布局基礎

1、盒子模型的第一層到第五層&#xff1a; border、padding content、background-image、background-color、margin 2、清除浮動。對受到浮動影響的標簽作以下操作&#xff1a; 1、clear: both; 2、clear: right; clear: left; 3、設置寬度width: 100%(或者固定寬度) overflow…
閱讀更多...
最新文章

Copyright @ 2022~2023