CSS(九)盒子模型+CSS3新知识
2019-01-12 19:41
771 查看
标准盒子模型
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> div{ width: 100px; height: 100px; } #first{ /* 左内边距,即内容到左边框的距离 */ /* padding-left:20px ;*/ /* 右内边距,即内容到右边框的距离 */ /* padding-right:20px ; */ /* 上内边距,即内容到上边框的距离 */ /* padding-top:40px ;*/ /* 下内边距,即内容到下边框的距离 */ /* padding-bottom:40px; */ /* 统一设置4个方向的内边距 */ padding: 40px; /* 设置4个方向的边框,值:边框宽度 样式 颜色 dashed:虚线边框 solid:实线边框*/ /* border-top:20px solid red; border-bottom: 20px solid red; border-left:20px solid red; border-right: 20px solid red; */ /* 统一设置4个方向的边框 */ border:10px solid red; /*设置下边的外边距 */ /* margin-bottom: 20px;*/ /*设置4个方向的外边距 */ margin: 20px; } #second{ border-left:10px dashed green; border-right:10px dashed green; } input{ border:5px dashed green; } </style> </head> <body> <div id="first" style="background-color: green;">我是div中的内容</div> <!-- <hr width="90%" size="2" color="aqua">--> <div id="second" style="background-color: pink;">我是div2中的内容</div> 用户名: <input type="text" > </body> </html>
清除默认样式
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> /* 清除默认样式,充分利用整个body */ *{ margin: 0; padding: 0; } </style> </head> <body> <div style="background-color: red;">111</div> </body> </html>
块级元素居中对齐
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> /* 清除默认样式,充分利用整个body */ *{ margin: 0; padding: 0; } div{ /* 设置块级元素左右的margin为auto,会自动适应父元素,在水平方向上居中 * margin:值1(上下的margin) 值2(左右的margin) * */ margin:0px auto; /*margin-top:0px; margin-bottom: 0px; margin-left: auto; margin-right:auto ;*/ } </style> </head> <body> <div style="background-color: red; width:90%;">111</div> </body> </html>
CSS3新知识
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> div{ width: 200px; height: 200px; /* 设置圆角边框 */ border-radius: 20px; text-align: center; line-height: 200px; } </style> </head> <body> <div id="first" style="background-color: red;">我是div中的内容</div> </body> </html>
相关文章推荐
- css知识笔记(二)——盒子模型
- CSS自学笔记(10):CSS3盒子模型
- Css3盒子模型-css学习之旅(5)
- Css3盒子模型-css学习之旅(5)
- Css3盒子模型-css学习之旅(5)
- Css3盒子模型-css学习之旅(5)
- 【css】-盒子模型
- CSS边框盒子模型详解
- 理解CSS3弹性盒子模型
- CSS-盒子模型
- css3弹性盒子模型详解( Flexible Box Model)
- 【JavaWeb】CSS_盒子模型(div块标签)
- css的核心内容 标准流、盒子模型、浮动、定位等分析
- css中盒子模型的理解
- 探究CSS3 box-sizing属性,重新定义盒子模型with、height尺寸
- 5-CSS-浮动清除-继承-优先级-定位-引入CSS-盒子模型
- Flexible 弹性盒子模型之CSS flex-wrap 属性
- div+css之盒子模型
- CSS的盒子模型(Box Model)
- CSS——盒子模型(margin\padding\border)