padding的使用:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title> </title> <style> *{ padding:0; margin:0; } .box{ 200px; heigth:200px; backgroud-color:red; /*上下左右*/ padding:10px /*上下 左右*/ padding:20px 30px; /* 上 左右 下*/ padding:20px 30px 40px; /* 上 右 下 左*/ padding:10px 20px 30px 40px; </style> <body> 标准文档流 父子之间调整位置 <div class="box">alex</div> </body> </html>
border的使用:
.box{ 200px; heigth:200px; backgroud-color:red; /*根据方向来设置border属性*/ border-left:2px solid green 左边框大小2px 实线 绿色 border-right:3px dotted yellow; 右边框大小 3px 圆点 黄色 border-top:4px double purple; 上边框大小4px 双实线 紫色 border-bottom: 5px dashed green; 下边框大小5px 虚线 绿色 第二种设置方法 border-left-style:solid; border-left- 2px; border-left-color:green; 简单设置上下 左右 border-5px 10px; border-color: green bliue; border-style:solid double;
制作三角形: 强行挤压出来的
0px; heigth:0px; border-bottom:20px solid red; border-bottom:20px solid transparent; border-right:20px solid transparent;
制作圆:
200px; heigth:200px; backgroud-color: red; 第一种方法 border-radius:100px 圆角设置为半径 第二种方法 border-radius:50%;
颜色设置的三种形式:
第一种:单词表示法
red green blue purple pink yellow........
第二种 rgb表示法 三原色: r:red红色 g:green绿色 b:blue蓝色
rgb(0,0,0)-rgb(255,255,255)
黑色:backgroud-color:rgb(0,0,0)
白色 backgroud-color:rgb(255,255,255)
黄色 backgroud-color:rgb(255,255,0)
第三种 十六进制表示法:
红色: #ff0000 = #f00 其实和rgb类似 只是转换成十六进制了 而且不用 逗号 隔开了
标准文档流下 margin 垂直方向上的坑:
当给两个标准流下的盒子 设置垂直方向的上的margin时,会以较大的为准,这种现象叫做塌陷.
<title>塌陷</title>
<style>
*{
padding: 0;
margin: 0;
}
.box1{
200px;
height: 180px;
background-color: red;
margin-bottom: 20px;
}
.box2{
300px;
height: 220px;
background-color: red;
margin-top: 50px;
}
</style>
</head>
<body>
<div class="box1">我是一个盒子</div>
<div class='box2'>我是第二个盒子</div>
</body>
解决办法: 给两个盒子设置浮动
父子盒子margin的坑:
.father{ 300px; height:300px ; background-color: blue; } .child{ 100px; height: 100px; background-color: red; margin-left: 50px; margin-top: 50px; } </style> </head> <body> <div class="father"> <div class="child">我是一个盒子</div> </div> </body>
解决办法:善用父亲的padding 让子盒子挤下来 而不是margin
display:显示模式
1一旦给一个块级元素比如div设置:
display:inline;
那么,这个标签将立即变为行内元素,此时他和一个span无异,inline就是行内.也就是说:
此时这个div不能设置宽度.高度 此时这个div也可以和别人并排了
2行内元素转为块级元素:
同样道理,一旦给一个行内元素比如span设置:
display: block;
那么这个标签将立即变为块级元素,和div无异,block就是 块的意思,也就是说
此时这个span能够设置宽度高度 此时这个span必须霸占一行,比人无法和他并排了 如果不设置宽高 将撑满父亲
浮动:float
float 有三个值 none:表示不浮动 默认 left :表示左浮动 right :表示右浮动
四大特性:
1浮动的元素脱标 :设置浮动以后,元素就飘起来了 会出现多层渲染的效果 所有标签一旦设置浮动,就能够并排,并且不区分行内 块级元素 都能够设置宽高
.box1{ 200px; height: 200px; background-color: red; float: left; } .box2{ 400px; height: 400px; background-color: yellow; } span{ background-color: green; float: left; 300px; height: 50px; } <div class="box1">小红</div> <div class="box2">小黄</div> <span>小马哥</span> <span>小马哥</span> 红盒子压住黄盒子 行内标签span可以设置宽高
2浮动的元素互相贴靠 像行级元素一样互相贴靠
3浮动的元素有"字维"效果 所谓的字围效果就是 当div浮动,p不浮动,div遮住了p,div的层级提高,但是p中的文字不会被覆盖而是在div周围显示
4有收缩的效果 所谓收缩就是一个浮动元素没有设置宽,自动收缩为文字的宽度
有浮动就一定要有清除浮动
清除浮动:
浮动元素能实现页面元素并排的效果,但是因为浮动元素不会填充父亲的高度,而父亲有没有设置高度所以容易产生页面错乱的情况.
四种方法清除浮动:
1,给父盒子设置高度:它的使用不灵活，一般会常用页面中固定高度的，并且子元素并排显示的布局。比如：导航栏
2clear:both:
clear：意思就是清除的意思。
有三个值：
left：当前元素左边不允许有浮动元素
right：当前元素右边不允许有浮动元素
both：当前元素左右两边不允许有浮动元素
给浮动元素的后面加一个空的div，并且该元素不浮动，然后设置clear：both。
*{ padding: 0; margin: 0; } ul{ list-style: none; } div{ 400px; } div ul li { float: left; 100px; height: 40px; background-color: red; } .box{ 200px; height: 100px; background-color: yellow; } .clear{ clear: both; } <div> <ul> <li>Python</li> <li>web</li> <li>linux</li> <!-- 给浮动元素最后面加一个空的div 并且该元素不浮动 ，然后设置clear:both 清除别人对我的浮动影响--> <!-- 内墙法 --> <!-- 无缘无故加了div元素 结构冗余 --> <div class="clear"></div> </ul> </div> <div class="box"> </div>
3伪元素清除法:给浮动子元素的父盒子，也就是不浮动元素，添加一个clearfix的类，然后设置
.clearfix:after{
/*必须要写这三句话*/
content: '.';
clear: both;
display: block;
}
4overflow:hidden
overflow属性规定当内容溢出元素框时发生的事情。
说明：
这个属性定义溢出元素内容区的内容会如何处理。如果值为 scroll，不论是否需要，用户代理都会提供一种滚动机制。因此，有可能即使元素框中可以放下所有内容也会出现滚动条。
