盒模型的属性/display显示(重要)/浮动(重要)
Posted rixian
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了盒模型的属性/display显示(重要)/浮动(重要)相关的知识，希望对你有一定的参考价值。
一.关于上篇博客的总结
1.高级选择器:
(1).后代选择器*****
选择的是儿子,孙子,重孙子
div p{}
(2).子代选择器
选择的是亲儿子
div>p
(3).组合选择器
div,p,a,span{}
(4).交集选择器
div.active{}
(5).属性选择器
input[type="text"]{}
(6),伪类选择器
爱恨准则
a:link{}
a:visited{}
a:hover{}
a:active{}
对a来设置字体颜色,一定要选中a
(7).伪元素选择器
p::first-letter{}
p:before{
content:""
}
//与浮动有关系
p:after{
content:""
}
2.CSS的继承性和层叠性
在CSS中,color, text-xxx, font-xxx, line-xxx这些属性是可以被继承下来
层叠性: 权重->谁的权重大就会显示谁的属性
权重大小的对比:
选择器的个数: id class 标签
①权重比较:
行内 > id > class > 标签
②权重比较:
继承来的属性,它的权重为0,与选中的标签没有可比性
③权重比较
都是继承来的,他们权重都为0,就近原则
④权重比较
都是继承来的,他们权重都为0,描述的一样近,再去数权重
⑤权重比较
权重一样大,后面的大于前面的属性
3.盒模型
标准盒模型:
width: 内容的宽度
height: 内容的高度
padding: 内边距,内容到边框的距离
border: 边框
margin: 外边框,一个盒子的边到另一个盒子边的距离
计算盒模型:
盒子的大小=width+2*padding+2*border
如果保证盒子大小不变,那么加padding,,就要减内容的width或height
4.浮动
浮动是实现元素并排,只要盒子浮动,就脱离标准文档流(不在文档流上占位置)
二.盒模型的属性(重要)
1.padding
(1).padding: 10px; 上下左右
(2).padding: 20px 30px; 上下 左右
(3).padding: 20px 30px 40px; 上 左右 下
(4).padding: 20px 30px 40px 50px; 顺时针 上右下左
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>padding的使用</title> <style type="text/css"> *{ padding: 0; margin: 0; } .box{ width: 200px; height: 200px; background-color: red; /*上下左右*/ padding: 10px; /*上下 左右*/ padding: 20px 30px; /*上 左右 下*/ padding: 20px 30px 40px; /*顺时针 上 右 下 左*/ padding: 20px 30px 40px 50px; } </style> </head> <body> <!-- padding是标准文档流，父子之间调整位置 --> <div class="box">娃哈哈</div> </body> </html>
2.border
三要素:线性的宽度, 线性的样式, 颜色
border: 1px solid red;
border-left: 1px solid red
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>border是的使用</title> <style type="text/css"> .box{ width: 200px; height: 200px; background-color: red; /*四个边框均为5px*/ /*border: 5px solid blue;*/ /*上下边框 蓝色实线,左右边框 黑色双线*/ /*bored-width: 5px 10px; border-color: blue black; border-style: solid double;*/ /*左边框黄色5px实线*/ /*border-left-style: solid; border-left-width: 5px; border-left-color: yellow;*/ /*左黑 右蓝 上黄 下紫*/ border-left: 5px solid black; border-right: 2px solid blue; border-top: 5px solid yellow; border-bottom: 2px solid purple; } </style> </head> <body> <!-- padding是标准文档流，父子之间调整位置 --> <div class="box">娃哈哈</div> </body> </html>
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>制作三角形</title> <style type="text/css"> div{ width: 0px; height: 0px; border-bottom: 20px solid red; border-left: 20px solid transparent; border-right: 20px solid transparent; } </style> </head> <body> <div></div> </body> </html>
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>制作圆</title> <style type="text/css"> div{ width: 200px; height: 200px; background-color: red; /*制作圆角*/ /*border-radius: 3px;*/ /*制作圆*/ /*border-radius: 100px;*/ border-radius: 50%; } </style> </head> <body> <div></div> </body> </html>
3.margin
前提是必须是在标准文档流下
margin的水平不会出现任何问题
垂直方向上margin会出现"塌陷问题"
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>margin的应用</title> <style type="text/css"> .a1{ background-color: red; margin-right: 30px; } .a2{ background-color: rgb(0,123,0); margin-left: 30px; } </style> </head> <body> <span class="a1">娃哈哈</span><span class="a2">爽歪歪</span> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> .s1{ width: 200px; height: 200px; background-color: red; margin-bottom: 40px; } .s2{ width: 200px; height: 200px; background-color:rgb(0,128,0); margin-top: 100px; } </style> </head> <body> <!-- 塌陷,两盒子之间的距离为100px --> <div class="s1"></div> <div class="s2"></div> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style> .box{ width: 300px; height: 300px; background-color: red; /*float: left;*/ } .child{ width: 100px; height: 100px; background-color: green; margin-left: 50px; margin-top: 50px; } </style> </head> <body> <!-- 子盒子向上推50px,结果带着父盒子一起推了 --> <div class="box"> <div class="child"></div> </div> </body> </html>
三.display 显示(重要)
前提是必须在标准文档流下
1.属性:
(1).block 块级标签
独占一行
可以设置宽高,如果不设置宽,默认父盒子宽度为100%
(2).inline 行内标签
在一行内显示
不可以设置宽高,根据内容来显示宽高
(3).inline-block 行内块
在一行内显示
可以设置宽高
(4)none 不显示,隐藏,不在文档上占位置
(5)visibility:hidden; 隐藏,在文档上占位置
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>display的应用</title> <style type="text/css"> .box{ width: 100px; height: 100px; background-color: red; border: 1px solid blue; display: inline; } div a{ display: block; width: 300px; height: 300px; } span{ display: inline-block; width: 300px; height: 200px; background-color: black; } </style> </head> <body> <div class="box">哇哈哈哈哈哈哈哈哈哈哈哈哈哈</div> <div class="box">呵呵呵</div> <div> <a href="#"> <img src="img/1.jpg" alt="" width="300px" height="200px" /> </a> </div> <input type="text" /> <span>啊啊啊啊啊</span> <span>啊啊啊啊啊</span> </body> </html>
四.浮动(重要)
浮动是css里面布局最多的一个属性，也是很重要的一个属性
float：表示浮动的意思。它有四个值
none: 表示不浮动,默认
left: 表示左浮动
right: 表示右浮动
1111
以上是关于盒模型的属性/display显示(重要)/浮动(重要)的主要内容，如果未能解决你的问题，请参考以下文章