css中的布局
css选择器的权重
选择器的权重
类型选择器(元素选择器)：0001
class选择器：0010
id选择器：0100
层级(包含)选择器：多个选择器的权重之和
群组选择器：分开看每个选择器的权重
谁的权重值大，谁的优先级高
display属性
HTML中标签分为块和行内
CSS中标签分为3类：块，行内块，行内(block, inline-block, inline)
(在标准流内)
block:一个占一行，默认宽度100%，高度默认根据情况确定；直接设置宽高有效
inline-block:一行可以有多个，默认宽高是内容的宽高;可以直接设置宽高有效，右边有默认的间隙，无法消除
inline:一行可以有多个，默认宽高是内容的宽高;设置宽高无效
通过改变标签的display的值，可以让一个标签在块，行内块和行内之间任意切换
浮动float
标准流：
1.块标签一个占一行，从上往下布局
2.行内标签一行可以显示多个，从左往右布局，遇到边界自动换行
脱流：浮动，定位
1.浮动，让竖着显示的标签横着显示
float：left和right
注意：1.如果要使用浮动，同一级的标签都要浮动
2.如果父标签浮动，那么子标签的位置会跟着一起动
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.p {
height: 60px;
background-color: deepskyblue;
}
.a {
width: 100%;
height: 100px;
background-color: deepskyblue;
float: right;
}
.b {
width: 70%;
height: 100px;
background-color: orange;
float: right;
}
.c {
float: left;
width: 30%;
height: 400px;
background-color: pink;
}
.d {
float: left;
width: 50%;
height: 300px;
background-color: deepskyblue;
}
.e {
float: left;
width: 20%;
height: 100px;
background-color: green;
}
.f {
float: left;
}
</style>
</head>
<body>
<!--<div id="div1" style="width: 100px; height: 80px; background-color: red;">ABC</div>
<div id="" style="width: 200px; height: 160px; background-color: green;">DEF</div>-->
<!--<div class="p">div0</div>
<div class="f" style="width: 30%;height: 180px; background-color: red;">div1</div>
<div class="f" style="width: 40%;height: 180px; background-color: green;">div2</div>
<div class="f" style="width: 30%;height: 180px; background-color: blue;">div3</div>
<div class="f" style="width: 100%;height: 60px; background-color: deepskyblue;">div4</div>-->
<div class="a"></div>
<div class="b"></div>
<div class="c"></div>
<div class="d"></div>
<div class="e"></div>
<div class="f" style="width: 20%; height: 270px; background-color: red;"></div>
</body>
</html>
文字环绕
文字环绕：被环绕的标签浮动，文字标签不浮动
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.d1{
float: left;
width: 60px;
height: 60px;
background-color: #008000;
}
.d2{
width: 100px;
}
</style>
</head>
<body>
<div class="d1"></div>
<div class="d2">
阿诗丹顿多多多多多多多多
</div>
</body>
</html>
清除浮动
清除浮动：是指清除因为浮动而产生的问题(高度塌陷)
如何清除浮动？
a.添加空的div <div style="clear: both;"></div>
在父标签(高度塌陷的标签)的最后添加一个空div，并且设置div的样式表：clear：both
可能会产生大量的额外的代码
b.设置overflow
在父标签中设置样式表的overflow的值为hidden
c.万年清除法
div:after {display:block;clear:both;content:"";visibility:hidden;height:0;}
div {zoom:1;}
定位
定位：
1.距离
top: 标签的顶部距离其他标签的位置
bottom: 标签的底部距离其他标签的位置
left: 标签左边距离其他标签的位置
right: 标签右边距离其他标签的位置
2.position
想要设置标签的值有效，必须设置标签的参考方法
--- initial：(默认值)没有参考对象
absolute：相对于第一个position的值非static，initial的父标签进行定位
relative：正常位置定位(按照标准流定位)
fixed：相对于浏览器定位
sticky：不滚动按照标准流布局，滚动的时候相对于浏览器定位
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#d1 {
position: relative;
width: 500px;
height: 900px;
background-color: blueviolet;
/*margin-top: 320px;*/
top: 200px;
}
#d2 {
position: absolute;
height: 100px;
width: 1000px;
background-color: royalblue;
top: 100px;
}
#d3 {
position: fixed;
bottom: 10px;
right: 10px;
width: 200px;
height: 100px;
background-color: blue;
}
#d4 {
position: sticky;
height: 100px;
background-color: brown;
bottom: 20px;
}
}
</style>
</head>
<body>
<div id="d1">
<div id="d2"></div>
</div>
<div id="d4"></div>
<div id="d3"></div>
</body>
</html>
盒子模型
每一个标签都是由4个部分组成：
1.内容：显示标签内容的部分，可见的(设置宽和高的值，就是设置内容部分的大小)
2.内边距(padding)：可见的，不能显示内容(通过设置padding来改变其值，默认是0)
3.边框(border)可见的，如果有内边距边框显示在内边距上，否则显示在内容上
4.外边距(margin)不可见的，但是会占据浏览器的空间
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
/*注意：网页编写在样式表的最前方关闭所有自带的所有margin和padding*/
div {
background-color: sandybrown;
/*1.设置内容大小*/
width: 100px;
height:100px;
/*2.padding的值有4个，
可以单独设，也可以一起设*/
/*padding-left: 20px;
padding-top: 10px;*/
/*padding：上右下左*/
padding: 10px 20px 30px 40px;
/*3.边框
可以单独设，也可以一起设
格式：宽度，样式，颜色
*/
border: 2px solid red;
/*4.margin的值有4个
可以单独设，也可以一起设*/
/*margin：上右下左
margin：上/下 左/右
*/
/*设置边框圆角*/
border-radius: 8px;
border-top-left-radius: 20px;
}
</style>
</head>
<body>
<div id="">
abc
</div>
</body>
</html>
居中
垂直居中
a.固定标签的高度
b.设置属性line-height的值和高度一样
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
div {
height: 100px;
background-color: hotpink;
text-align: center; /* 水平居中方式 */
line-height: 100px;
}
p {
display: inline-block;
height: 50px;
width: 200px;
background-color: green;
line-height: 50px;
text-align: center;
}
</style>
</head>
<body>
<div>
<p>床前明月光</p>
</div>
</body>
</html>
网友评论