盒子属性,浮动,定位

Posted qq2267711589

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了盒子属性,浮动,定位相关的知识,希望对你有一定的参考价值。

1.盒子常见属性

1)容器盒子

Box-size:设置盒子模型,CSS3标准,

content-box:正常默认模式,起源于谷歌,元素的整体大小会被内边距和边框撑开

border-box:怪异模式,起源于IE,元素的整体大小不会被内边距和边框撑开

Width:宽度

Height:高度

注意:width,height会根据box-size盒子模型的不同来决定是内容的宽度和高度,还是整个元素大小的宽度和高度。

 

2)Padding:内边距

Padding-left,padding-right,padding-top,padding-bottom

Padding:上 右 下 左;

Padding:上 右 下;左边距等于右边距

Padding:上 右;下跟上边一样,左跟右一样

 

3)Margin:外边距

外边距跟内边距一致。但是两个元素的外边距会重叠。

 

4)Border:边框

语法:border: 边框宽度 边框样式 颜色;

可以分开设置,例如

border-width: 30px;

border-style: dashed;

border-color: purple;

 

分别设置上下左右边框,例如

border-bottom:50px dotted green;

5)Box-shadow:盒子阴影

box-shadow: 阴影的水平偏移值 阴影的垂直偏移值 阴影的模糊度 阴影的颜色;

 

6)Display:设置盒子是块级元素还是行级元素还是弹性元素

Block:块级元素,会占据一整行,有宽高,div,h1,p,li,ul...

Line-block:行块元素,不会占据一整行,有宽高,img...

Line:行元素,不会占据一整行,也没有宽高,a,span...

 

7)Border-radius:边框的圆角

 

8)Background:设置元素的背景,背景图片,背景颜色

Background:是一个综合性的属性,可以分出背景颜色,背景图片,背景是否重复,背景图片的位置,背景图片的大小

Background-position:设置背景图片的位置,left,right,top,bottom,center,百分比一般可以设置2值,第一个值是设置水平位置,第二个值设置垂直位置

Background-size:设置背景图片的大小,注意:有时候不知道图片的确切比例的时候,只需要设置一个宽度或者高度,另外一个值设置为auto即可。

2.浮动

 

浮动元素会寻找父元素的边缘或者是同样浮动元素的边缘,紧紧的靠拢在一起。

 

1)优点

 

[1]可以让文字包围图片。

 

[2]可以去掉莫名其妙的间距

 

[3]可以让内容向左和向右排布

2)大问题

 

父元素高度塌陷

 

原因:使用了浮动的元素,会脱离正常的文档流,使其父元素找不到子元素,从而认为自己内部没有元素,所以没有高度。

 

3)解决方案:

 

[1]给父元素设置高度

 

[2]万能的解决方案

 

 

 

案例代码:

 

  1 <!DOCTYPE html>
  2 
  3 <html>
  4 
  5 <head>
  6 
  7 <meta charset="UTF-8">
  8 
  9 <title></title>
 10 
 11 <style type="text/css">
 12 
 13 .parent{
 14 
 15 width: 900px;
 16 
 17 /*height: 600px;*/
 18 
 19 border: 1px solid #000;
 20 
 21 margin: 20px auto;
 22 
 23 }
 24 
 25  
 26 
 27 .child{
 28 
 29 width: 200px;
 30 
 31 height: 200px;
 32 
 33 background: skyblue;
 34 
 35 display: inline-block;
 36 
 37  
 38 
 39 }
 40 
 41  
 42 
 43  
 44 
 45 .left{
 46 
 47 float: left;
 48 
 49 }
 50 
 51  
 52 
 53 .right{
 54 
 55 float: right;
 56 
 57 }
 58 
 59  
 60 
 61 /*
 62 
 63  解决方案:清除浮动
 64 
 65  1、在父元素的最后面加上一个div
 66 
 67  2、设置这个div的样式为:clear:both;
 68 
 69  
 70 
 71  缺点:多了1个div,结构比较混乱
 72 
 73  * */
 74 
 75  
 76 
 77 /*
 78 
 79  完美升级方案:
 80 
 81  1、使用伪元素创建一个假的元素,:after在元素的最后面创建一个假的子元素
 82 
 83  2、设置这个假的元素为块级元素
 84 
 85  3、清除左右浮动clear:both
 86 
 87  * */
 88 
 89  
 90 
 91 .clear:after{
 92 
 93 content: "";
 94 
 95 display: block;
 96 
 97 clear: both;
 98 
 99 }
100 
101 </style>
102 
103 </head>
104 
105 <body>
106 
107 <div class="parent">
108 
109 <!--只有class才可以同时放置多个class,中间用空格隔开-->
110 
111 <div class="child left"></div>
112 
113 <div class="child right"></div>
114 
115 <div class="child right"></div>
116 
117  
118 
119 <div style="clear: both;"></div>
120 
121 </div>
122 
123  
124 
125  
126 
127 <div class="parent clear">
128 
129 <!--只有class才可以同时放置多个class,中间用空格隔开-->
130 
131 <div class="child left"></div>
132 
133 <div class="child right"></div>
134 
135 <div class="child right"></div>
136 
137  
138 
139  
140 
141 </div>
142 
143 </body>
144 
145 </html>

 

 

弹性布局--->当下最佳布局方式。

 

3.定位(Position)

 

1)相对定位relative

 

语法:postion:relative;

 

特点:相对于自身进行位移,只是样子进行了移动,其实还是会牢牢占据原来的位置,不会影响到整个布局的变化

 

 

 

2)绝对定位absolute

 

语法:postion:absolute

 

特点:脱离正常的文档流,不会占据原来的位置。相对于设置了定位的父元素或者是祖先元素。

 

 

 

3)固定定位fixed

 

语法:position:fixed

 

特点:脱离正常的文档流,不会占据原来的位置。相对于浏览器进行定位

 

 

 

4)层:z-index

 

语法:Z-index:数字;

 

解析:z-index可以设置统一级别下,使用了定位的层级关系。z-index值越大,层越在上面。默认情况下,所有元素的z-index值为0。没有使用定位的元素,不可用。

 

以上是关于盒子属性,浮动,定位的主要内容,如果未能解决你的问题,请参考以下文章

页面布局-浮动定位

Web前端技术:CSS部分深入---盒子模式,overflow属性,border属性,内外边距,水平居中问题,块行内元素,浮动,层定位

浮动新认知

前端浮动和定位

浮动属性

浮动属性