前言
每天多学一点点,加油
一、css三大特性
1.层叠性(覆盖)
解决样式冲突,若样式冲突采用就近原则,只覆盖相同而属性。
<style>
div {
color: #000;
font-size: 30px;
}
div {
color: rgb(230, 78, 78);
}
</style>
</head>
<body>
<div>my bebe bebe </div>
</body>
2.继承
子承父业。简化代码,主要继承有关文字的样式
<style>
div {
color: #000;
font-size: 30px;
}
</style>
</head>
<body>
<div>
<p>my bebe bebe</p>
</div>
</body>
3.优先级
- 选择器相同,执行层叠。若不同,根据选择器权重。
- 继承或*<元素选择器<类选择器、伪类选择器<id选择器<行内样式“style”<importane
- 权重有4位数字组成不会进位,继承的权重是0,继承的代码和自己的比一定权重小
- 权重叠加
<style> /* 权重0,0,0,1+0,0,0,1=0,0,0,2 */ div p { color: #000; font-size: 30px; } /* 权重0,0,0,1 */ p { color: rgb(197, 59, 59); } /* 0,0,1,0+0,0,0,1=0,0,1,1 */ .nov p { color: rgb(131, 86, 86); } </style> </head> <body> <div class="nov"> <p>my bebe bebe</p> </div> </body>
二、盒子模型
1.组成
边框(会改变盒子大小),内容,内边距(会改变盒子大小),外边距
1)边框粗细,样式,颜色,
<style>
div {
width: 300px;
height: 200px;
/* 边框粗细 */
border-width: 10px;
/* 边框样式 */
border-style: solid;
/* 颜色 */
border-color: cornflowerblue;
}
</style>
</head>
<body>
<div>
<p>my bebe bebe</p>
</div>
</body>
div {
width: 300px;
height: 200px;
/* 边框复合写法 */
border: 5px solid red;
}
改变单边颜色
div {
width: 300px;
height: 200px;
/* 边框复合写法 */
border: 5px solid red;
/* 改变单边颜色,就近原则顺序不能改变 */
border-top: 5px solid rgb(26, 23, 23);
}
2.内边距
/* padding-left: 50px;
padding-top: 50px;
padding-bottom: 50px; */
/* 内边距复合写法 一个值代表上下左右 2个值是第一个代表上下,二个代表左右 三个值:上 左右 下 四个值:上 右 下左顺时针*/
padding: 5px;
案例
<style>
div {
height: 20px;
/* 边框复合写法 */
border: 3px solid rgb(223, 226, 217);
/* 改变单边颜色,就近原则顺序不能改变 */
border-top: 5px solid rgb(172, 236, 43);
/* padding-left: 50px;
padding-top: 50px;
padding-bottom: 50px; */
padding: 5px;
}
div a {
display: inline-block;
font-size: 12px;
color: rgb(105, 210, 224);
height: 30px;
padding: 0 5px;
font-style: initial;
text-decoration: none;
}
a:hover {
background-color: rgb(12, 51, 51);
}
</style>
</head>
<body>
<div>
<a href="#">肘子舒</a>
<a href="#">肘子舒</a>
<a href="#">肘子舒</a>
<a href="#">肘子舒</a>
</div>
</body>
3.外边距
<style>
div {
width: 30px;
height: 20px;
background-color: rgb(201, 89, 89);
}
.one {
margin-bottom: 10px;
}
</style>
</head>
<body>
<div class="one">1</div>
<div>2</div>
</body>
重点
4.盒子居中和行内元素和行内块元素居中
盒子必须指定宽度,左右外边距设为auto
给父元素添加
盒子居中:margin: 100px auto;
行内元素和行内块元素居中:text-align: center;
<style>
.one {
width: 300px;
height: 200px;
background-color: rgb(201, 89, 89);
/* 盒子居中 */
margin: 100px auto;
/* 文字居中 */
text-align: center;
}
</style>
</head>
<body>
<div class="one"><span>1</span></div>
</body>
行内块与文字同
5.塌陷问题
想让子元素与父元素相离,但直接不可以操作
/* 1.父元素定义边框 */
/* 2.父元素定义内边距 */
/* 3.overflow.hiden */
<style>
.one {
width: 300px;
height: 200px;
background-color: rgb(201, 89, 89);
/* 盒子居中 */
margin: 100px auto;
/* 文字居中 */
text-align: center;
margin-top: 50px;
/* 1.父元素定义边框 */
border: 1px solid transparent;
/* 2.父元素定义内边距 */
padding: 1px;
/* 3.overflow.hiden */
overflow: hidden;
}
.wo {
width: 100px;
height: 50px;
background-color: lightgreen;
margin-top: 50px;
}
</style>
</head>
<body>
<div class="one">
<div class="wo"><img src="suibian.jpg"></div>
</div>
</body>
6.清除内外边距
* {
margin: 0px;
padding: 0px;
}
三、案例
<style>
* {
margin: 0px;
padding: 0px;
}
body {
background-color: rgb(255, 250, 250);
}
.one {
width: 298px;
height: 500px;
margin: 100px auto;
background-color: rgb(173, 159, 159);
}
.one img {
width: 100%;
}
.re {
height: 70px;
font-size: 14;
padding: 0 28px;
margin-top: 30px;
}
.app {
font-size: 12px;
color: #dbc2c2;
padding: 0 28px;
margin-top: 20px;
}
.info {
font-size: 14px;
margin-top: 15px;
padding: 0 28px;
}
.info h4 {
font-weight: 400px;
display: inline-block;
font-weight: 400;
}
.info span {
color: brown;
font-size: 16px;
}
.info em {
font-style: normal;
margin: 0 6px 0 15px;
color: cornsilk;
}
a {
color: black;
text-decoration: none;
}
</style>
</head>
<body>
<div class="one">
<img src="zzh.jpg" alt="">
<p class="re">周子舒第一大美人</p>
<div class="app">来自于 19826753评论</div>
<div class="info">
<h4><a href="#">周子舒天窗窗花出名...</a></h4>
<em>|</em>
<span>9999.0</span>
</div>
</div>
</body>
四、圆角边框
- 圆角边框:border-radius: 10px(长度);
- 当正方形变圆:border-radius: 50%(宽度和高度一半即为圆形)
- 长方形设置高度一半即可变
- 对角线为一个数值可简写border-radius:左上角顺时针走四个数值
五、盒子阴影
box-shadow: 20px(x轴) 20px (y轴)【必写】20px(虚实) 20px(阴影尺寸) black(阴影颜色);
六、文字阴影
text-shadow: 5px 5px 6px black;
七、浮动
1.标准流
行、块等按照默认方式排队,最基本的方式。
2.浮动
使多个盒子在一行上浮动。
<style>
.one,
.two {
width: 200px;
height: 100px;
background-color: rgb(134, 38, 38);
float: left;
}
</style>
</head>
<body>
<div class="one">
<h4>123</h4>
</div>
<div class="two">
<h4>124</h4>
</div>
</body>
- 脱标: 脱离标准的控制,去到指定位置
- 浮动的盒子不再保留原来的位置,标准盒子占有原来位置,浮动盒子在标准盒子上方浮着(重点)
- 浮动特性:两个以上盒子会处在同一行,当页面装不下时会另起一行,有行内块元素特性
- 浮动盒子和标准流父盒子搭配使用:标准盒子约束浮动盒子
- 一个浮动,则全部浮动。若第一个孩子不浮动,则是标准流独占一行,后面的不会压上。浮动只会影响后面的盒子。
- 清除浮动:本质是清除浮动元素造成的影响。clear:属性值(both) ;闭合浮动,只让浮动在父盒子内部影响。 1.额外标签法:在浮动的末尾添加一个空块的标签 2.父级添加overflow:overflow:hiden 3.清除浮动:clearfix:after 在浮动的盒子后加了一个新盒子 4.双伪元素:浮动盒子前后都加一个盒子形成一个闭合
3.定位
八、css属性书写顺序(重点)
总结
累了