1. CSS的三大特性
层叠性、继承性、优先级
1.1 层叠性
如果设置相同的样式,则有一个样式会层叠另外一个样式
样式冲突原则:就近原则(覆盖),哪个样式离结构近,就执行哪个样式
1.2 继承性
子标签会继承父标签的某些样式(不是全部样式)
某些样式包括:
text-、font-、line-
开头的元素
<head>
<meta charset="utf-8">
<title></title>
<style>
div{
color: blue;
}
</style>
</head>
<body>
<div>
<p>你好</p>
</div>
</body>
p标签的“你好”,也会是蓝色
1.3 优先级
当一个元素指定多个选择器,就会有优先级的产生
- 选择器相同,则执行层叠性
- 选择器不同,则根据选择器权重执行
* 继承的权重为0
- 对于复合选择器,选择器越精准,权重越高
CSS 盒子模型
页面布局要学习三大核心:盒子模型、浮动 和 定位
所谓盒子模型,就是把HTML页面中的布局元素,看作是一个矩形盒子,也就是一个盛装内容的容器
CSS盒子模型本质上是一个盒子,封装周围的HTML元素,它包括:边框、外边距、内边距和实际内容
外框board
board的设置:
div{
width: 100px;
height: 100px;
background-color: yellow;
border-width: 10px;
border-color: red;
/* border-style: solid;//实线 */
/* border-style: dashed;//虚线 */
border-style: dotted;//点线
}
或者简写:
border: 10px gray solid;
没有顺序
问:如何做到上边框红色,其余框蓝色?
border: 10px blue solid;
border-top: 10px red solid;
注意上下顺序不要写反
border-collapse: collapse;
合并相邻的边框
如果div100x100,boarder10x10
那么,盒子的实际内容大小是100 - 10*2 = 80
变小了
内边距
padding
属性用于设置内边距,既边框与内容之间的距离
padding-left: 20px;
padding-top: 20px;
简写:
padding也会影响盒子的实际大小
如果div100x100,padding10x10
那么,盒子的实际内容大小是100 + 10*2 = 120
变大了
导航栏小练习
<style>
.nav {
border-top: 3px #ff8500 solid;
border-bottom: 1px #edeef0 solid;
height: 41px;
background-color: @fcfcfc;
}
.nav a{
display: inline-block;
color: #4c4c4c;
text-decoration: none;
padding-left: 20px;
padding-right: 20px;
text-align: center;
line-height: 41px;
}
.nav a:hover{
background-color: #eeeeee;
color: #ff8500;
}
</style>
</head>
<body>
<div class="nav">
<a href="#">设为首页</a>
<a href="#">手机新浪网</a>
<a href="#">移动客户端</a>
<a href="#">博客</a>
<a href="#">微博</a>
<a href="#">关注我</a>
</div>
</body>
- 如果盒子本身没有指定width/height属性,则此时padding不会撑开盒子大小
外边距(margin)
margin属性用于设置外边距,即控制盒子和盒子之间的距离
写法:margin-left等
- margin的简写与padding的简写方式一样
外边距的典型应用
外边距可以让 块级盒子 水平居中,但必须满足两个条件:
- 盒子必须指定了宽度
- 盒子左右的外边距都设置为auto
width: 200px;
height: 100px;
background-color: purple;
/* margin-left: auto; */
/* margin-right: auto; */
margin: 0 auto;
以上方法是让块级元素水平居中
行内元素或者行内块元素水平居中,可以给其父元素添加text-align:center
即可
外边距合并
使用margin定义块元素的垂直外边距时,可能会出现外边距的合并
主要由两种情况:
- 相邻块元素垂直外边距的合并
- 嵌套块元素垂直外边距的塌陷
1. 相邻块元素垂直外边距的合并
如果上下两个相邻块元素相遇,如果上面那个有margin-bottom,下面那个有margin-top,实际效果是,取两个最大的,作为中间的间距
这样的话,只设置一个margin即可
2. 嵌套块元素垂直外边距的塌陷
对于两个嵌套关系(父子关系)的块元素,父元素有上外边距的同时,子元素也有上外边距,此时,父元素会塌陷较大的外边距值
父元素的外边距值按最大的外边距设置
如果,我们就是要实现父元素有上边距,子元素也有上边距的效果,该如果操作呢?
可以使用三种方法:
- 父元素不设置margin,而改为设置border
border-top: 1px #800080 solid;
- 可以为父元素定义 上内边距
padding-top: 1px;
- 可以为父元素添加
overflow: hidden
清除内外边距
不同的标签,有不同的默认边距
而不同的浏览器,默认边距有可能也不一样
因此,我们将进行清除内外边距,使得默认边距没有
* {
margin: 0px;
padding: 0px;
}
行内元素为了照顾兼容性,尽量只设置左右的内外边距,不要设置上下的内外边距(设置的也不起左右)
行内元素转换为块级元素或者行内块元素,就可以设置上下的内外边距了
盒子-练习
思路
大致分块:
参考代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
* {
margin: 0px;
padding: 0px;
}
body {
background-color: #f5f5f5;
}
a {
color: #333333;
text-decoration: none;
}
.box {
width: 300px;
height: 400px;
background-color: white;
border: 1px lightgray solid;
/*上下100px 左右自动*/
margin: 100px auto;
}
.box img {
width: 100%;
}
.review {
height: 70px;
font-size: 14px;
/* 因为没有设置width,因此padding不会超过盒子的宽度 */
padding: 0px 28px;
margin-top: 30px;
margin-bottom: 20px;
}
.appraise {
font-size: 12px;
margin-top: 20px;
padding: 0px 28px;
color: #b0b0b0;
}
.info span {
font-size: 14px;
margin-top: 15px;
}
.info .first {
padding-left: 28px;
}
.info .line {
color: #b0b0b0;
}
.info .price {
color: orange;
}
</style>
</head>
<body>
<div class="box">
<img src="img/企业微信20220420-165631@2x.png" alt="占位图" >
<p class="review">快递🐂,整体不错,蓝牙可以说秒连。红米给力</p>
<div class="appraise">来自 Asian 的评价</div>
<div class="info">
<span class="first"> <a href="">Redmi AirDots真无线蓝...</a></span>
<span class="line">|</span>
<span class="price">99.9元</span>
</div>
</div>
</body>
</html>
小栗子
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
* {
margin: 0px;
padding: 0px;
}
li {
/* 去掉 前面的圆点 */
list-style: none;
}
.box {
border: 1px solid #D3D3D3;
width: 248px;
height: 163px;
margin: 100px auto;
}
.box .title {
border-bottom: 1px dotted #D3D3D3;
height: 32px;
font-size: 14px;
font-weight: 400;
padding-left: 15px;
line-height: 32px;
}
.box ul {
margin: 5px 10px;
}
.box ul li{
height: 23px;
line-height: 23px;
}
.box ul li a {
font-size: 12px;
text-decoration: none;
color: #666666;
}
.box ul li a:hover {
text-decoration: underline;
}
</style>
</head>
<body>
<div class="box">
<h3 class="title">优品购快报</h3>
<ul>
<li><a href="">【特惠】爆款耳机5折秒</a></li>
<li><a href="">【特惠】母亲节,健康好礼低至5折</a></li>
<li><a href="">【特惠】爆款耳机5折秒。。。</a></li>
<li><a href="">【特惠】爆款耳机5折</a></li>
<li><a href="">【特惠】爆款耳机</a></li>
</ul>
</div>
</body>
</html>
圆角
- 圆角边框
border-radius: 100px;
或者border-radius: 50%;
border-radius: 10px 20px 30px 40px;
左上、右上、右下、左下
盒子阴影
box-shadow: 20px 10px 10px 10px rgba(0,0,0,0.3);
文字阴影
text-shadow: 10px 10px 10px #333333;