盒子属性，浮动，定位

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。没有使用定位的元素，不可用。

转载于:https://www.cnblogs.com/qq2267711589/p/10923380.html

盒子属性，浮动，定位相关推荐

前端学习 day4 : 盒子模型,浮动,定位
1.居中问题 text-align是让块元素中的内容在块元素的范围内水平居中如果设置块元素中的内容的属性line-height的高度等于块元素高度的话,那么该内容垂直居中 2.盒子边框的设置 2.1 ...
CSS浮动定位与背景样式
CSS浮动定位与背景样式 1.浮动与定位 1.1 浮动的基本概念本质功能 : 实现块元素并排布局使用要点 : 1.要浮动,并排的盒子都要设置浮动2.父盒子宽度足够,否则会被迫换行3.子盒子会按顺序 ...
htm盒子模型与定位
以下图片,详细清晰的讲明了盒子模型. 行内元素之间的水平距离当两个行内元素并排紧邻时,它们之间的距离为margin-left和margin-right之和. 注意,对于行内元素,margin-top ...
CSS基础知识(表单标签、事件、CSS介绍、选择器、伪类选择器案例、样式、盒子模型、定位)...
一. 表单标签 <!DOCTYPE html> <html lang="en"> <head><meta charset="UT ...
前端之CSS——属性和定位
一.字体属性 1.font-size(字体大小) p {font-size: 14px; } font-size 属性可设置字体的尺寸. px:像素,稳定和精确 %:把 font-size 设置为基于 ...
css盒子模型浮动
1.盒子模型所谓盒子模型就是把HTML页面中的元素看作是一个矩形的盒子,也就是一个盛装内容的容器.每个矩形都由元素的内容.内边距(padding).边框(border)和外边距(margin)组成. ...
BFC机制与浮动定位脱离文档流
BFC机制与浮动定位脱离文档流 BFC块格式化上下文 --w3c规定的一种独立渲染区域渲染流程基本上四个步骤: 1.计算CSS样式 2.构建Render Tree 3.Layout – 定位.大小, ...
CSS--背景样式---伪类选择器---高级选择器---盒子模型---浮动
文章目录背景样式背景颜色背景图片图片重复方式图片位置图片附着简写属性伪类选择器高级选择器后代选择器直接后代选择器并列选择器相邻兄弟选择器盒子模型边框内边距外边距外边 ...
JavaScript 浮动定位提示效果
本来想做一个集合浮动定位和鼠标跟随的tooltips效果,但发现定位和鼠标跟随在一些关键的地方还是不同的,还是分开来吧. 这个效果本身难度不大,主要在程序结构和扩展中下了些功夫,务求用起来更方便,能 ...
CSS表格与浮动定位
一.表格 1.表格的常用属性 1.边距属性:padding 2.尺寸属性:width,height 3.文本格式化属性: font-* text-align,color,text-i ...

盒子属性，浮动，定位

1）优点

盒子属性，浮动，定位相关推荐

最新文章

热门文章