边框属性
1 <style> 2 div{ 3 border-style: solid; 4 border-color: red; 边框颜色 5 border-width: 5px; 6 width: 200px; 7 height: 200px; 8 border: 10px solid chartreuse; 简写方式 9 border-top-style: solid; 10 border-right-style: solid; 11 border-bottom-style: dashed; 12 border-color: red; 13 14 } 15 </style>
none 无边框
dotted 点状虚线边框
dashed 矩形虚线边框
solid 实线边框
控制圆角
border-radius: 50%;
display 属性
1 div{ 2 width: 100px; 3 height: 100px; 4 border: 1px solid red; 5 /*display: inline; !* 将标签设置为内敛标签 *!*/ 6 /*display: inline-block; !* 将标签设置为同时具备内敛和块级标签的一些特性,比如可以设置高度宽度,但是不独占一行 *!*/ 7 /*display: none; !* 隐藏标签 ,并且不占用自己之前的空间*!*/ 8 9 } 10 span{ 11 border: 2px solid blue; 12 13 } 14 15 .c1{ 16 width: 200px; 17 height: 200px; 18 /*display: inline-block;*/ 19 display: block; /* 将内敛标签设置为块级标签 */ 20 } 21 22 值 意义 23 display:"none" HTML文档中元素存在,但是在浏览器中不显示。一般用于配合JavaScript代码使用。 24 display:"block" 默认占满整个页面宽度,如果设置了指定宽度 也没有用,则会用 margin填充剩下的部分。 25 display:"inline" 按行内元素显示,此时再设置元素的width、height、margin-top、margin- bottom和float属性都不会有什么影响。 26 display:"inline-block" 使元素同时具有行内元素和块级元素的特点 可以设置宽高且不独占一行 。 27 28 29 隐藏标签 30 visibility: hidden; /* 隐藏标签,但是标签还占用原来的空间 */ 31 /*display: none; !* 隐藏标签 ,并且不占用自己之前的空间*!*/
css盒子模型
content 内容区域,自己设置
padding内边框,内容与边框距离
border 边框宽度 线粗
1 content内容区域 自己设置的 2 padding 内边距 内容与边框距离 可以自己设置(设置后会在总体会变大) 如果不设置默认? 3 border 边框宽度 线粗 4 margin 外边距 你和别的标签距离 5 div{ 6 width: 200px; 7 height: 100px; 8 border: 2px solid deeppink; 9 /*padding-top: 10px;*/ 10 /*padding-left: 5px;*/ 11 /*padding-right: 2px;*/ 12 /*padding-bottom: 4px;*/ 13 /*padding: 10px 20px; !* 10px上下内边距 ,20px左右内边距 *!*/ 14 /*padding: 10px 20px 5px 2px; !* 10px上下内边距 ,20px左右内边距 *!*/ 15 padding: 10px 20px 5px 0; /* 10px上下内边距 ,20px左右内边距 */ 16 17 }
margin外边框
1 margin 外边距 2 top距离上面标签的距离 3 bottom距离下面标签的距离 4 left 距离左边标签的距离 5 rigth 距离右边标签的距离 6 7 .d1 { 8 width: 200px; 9 height: 100px; 10 border: 2px solid deeppink; 11 margin-bottom: 200px; 12 } 13 .d2{ 14 margin-top: 100px; 15 border: 2px solid blue; 16 17 } 18 19 两个简写的方式 20 /*margin: 10px 20px;*/ 21 margin: 10px 5px 6px 3px; 22 23 两个情况: 24 垂直方向如果上下两个标签都设置了margin外边距,那么取两者的最大的值 25 水平方法,两个标签都设这外边距,取两者的边距之和
float 浮动
1 浮动会造成父级标签塌陷问题 2 解决方法: 3 1 父级标签设置高度 4 2 伪元素选择器清除浮动,给父级标签加上下面这个类值 5 .clearfix:after{ 6 content: ‘‘; 7 display: block; 8 clear: both; 清除浮动clear 9 } 10 11 clear的值和描述 12 值 描述 13 left 在左侧不允许浮动元素。 14 right 在右侧不允许浮动元素。 15 both 在左右两侧均不允许浮动元素。