边框 css盒子模型 浮动
边框属性
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 在左右两侧均不允许浮动元素。
overflow
1 .c1{ 2 width: 200px; 3 height: 200px; 4 border: 1px solid red; 5 /*overflow: hidden;*/ 6 overflow: auto; 7 } 8 <div class="c1"> 9 总结一下：为什么要有浮动啊，是想做页面布局，但是浮动有副作用，父级标签塌陷，所以要想办法去掉这个副作用，使用了clear来清除浮动带来的副作用，我们当然也可以通过设置标签为inline-block来实现这种布局效果，但是把一个块级标签变成一个类似内敛标签的感觉，不好操控，容易混乱，所以一般都用浮动来进行布局。 10 </div> 11 12 值 描述 13 visible 默认值。内容不会被修剪，会呈现在元素框之外。 14 hidden 内容会被修剪，并且其余内容是不可见的。 15 scroll 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
圆形头像
1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <meta http-equiv="x-ua-compatible" content="IE=edge"> 6 <meta name="viewport" content="width=device-width, initial-scale=1"> 7 <title>圆形的头像示例</title> 8 <style> 9 10 .header-img { 11 width: 150px; 12 height: 150px; 13 border: 3px solid white; 14 border-radius: 50%; 15 overflow: hidden; 16 } 17 18 .header-img>img { 19 width: 100%; #让img标签按照外层div标签的宽度来显示 20 21 } 22 </style> 23 </head> 24 <body> 25 26 <div class="header-img"> 27 <img src="meinv.png" alt=""> 28 </div> 29 30 </body> 31 </html>
总结一点：width宽度设置的时候，直接可以写100px，30%这种百分比的写法，他的宽度按照父级标签的宽度的百分比来计算
