当前位置：首页 > news >正文

【前端基础--2】

news 2025/7/7 3:27:49

选择器优先级

style标签中：

        .text{color: pink;}div{color: red;}#box{color: skyblue;}

body标签中：

    <div class="text" id="box">猜猜我是什么颜色的</div>

运行结果：

选择器优先级权重：

id选择器 > 类名选择器 > 标签名 > 通配符 > 继承（子级默认继承父级）

id选择器 > 后代选择器(类名+标签名 .text p)> 类名选择器 > 标签名

同级下，按照就近原则

抽象来讲：

进行叠加：id(100) 类名(10) 标签(1) 通配符(0.1) 后代选择器(10+1)

盒模型

看成一个矩形的盒子

盒模型组成

内容区域 content
内边距 padding
边框 border
外边距 margin

盒模型属性的运用

1.内容 content (width+height)

块级元素：div ul li p h1~h6等。在不限定高宽的情况下默认是文字大小决定的高度和与浏览器长度相等的宽度。

行内标签：span a b i em strong等。这些标签不支持自定义高宽，高宽都是依据文字的。

内边距padding

会扩展盒子的大小

两个值写法：（上下都是10，左右是20）

padding：10px 20px；

三个值写法：（上10，左右各20，下30）

padding：10px 20px 30px；

四个值写法：（上10，右20，下30，左40）

padding：10px 20px 30px 40px；

单个写法：

顶部内边距：padding-top：10px；

底部内边距：padding-bottom：10px；

左边内边距：padding-left：10px；

右边内边距：padding-right：10px；

边框border

会扩展盒子大小

border:10px solid red; (一个红色的实线边框)

border：边框大小边框风格边框颜色

分解写法：

border-width:10px;

border-style:solid;

border-color:pink;

顶部边框：border-top:5px solid red; (实线)

底部边框：border-bottom:5px dashed pink; （虚线)

左侧边框：border-left:5px dotted skyblue; (点状线）

右侧边框：boeder-right:5px double green; (双边线)

边框单独设置：border-top-width:5px;

外边距margin

不会改变盒子大小，会控制该盒子与浏览器边框或与其他盒子的距离

margin:20px;

单个写法：（常用）

margin-top:10px;

margin-left:10px;

margin:auto; (左右自适应居中）

两个值写法：（上下都是10，左右是20）

margin：10px 20px；

三个值写法：（上10，左右各20，下30）

margin：10px 20px 30px；

四个值写法：（上10，右20，下30，左40）

margin：10px 20px 30px 40px；

盒子的合并

父子盒子外边距合并：若想让两个盒子之间有距离的概念，可以给父盒子添加一个支撑点（内边距或边框）。

兄弟外边框合并：两个盒子的外边距会重叠，添加一个行内块属性就可以解决这个问题了。（display:inline-block;)

标准盒模型

box-sizing:content-box;

宽度: 240 内容宽度: 200 + 左右内边距: 20 + 左右边框: 20

高度: 240 内容高度: 200 + 上下内边距: 20 + 上下边框: 20

怪异盒模型

box-sizing:border-box;

内容宽度: 200 被缩减后的内容宽度: 160 + 左右内边距: 20 + 左右边框: 20

内容高度: 200 被缩减后的内容高度: 160 + 上下内边距: 20 + 上下边框: 20

不改变盒子总大小，但是要添加边框和内边距，就使用怪异盒模型。

溢出隐藏属性

内容超出盒子也正常显示

overflow: visible;

溢出隐藏

overflow: hidden;

内容不论会不会超过盒子都会出现滚动条

overflow: scroll;

内容不超过盒子时就不会出现滚动条了

overflow:auto;

清除默认样式

第一种写法：通配符*清除默认样式写法

        *{/* 外边距 */margin: 0px;/* 内边距 */padding: 0px;/* 清除边框 */border: none;/* 清除默认自带黑点 */list-style: none;}

第二种写法：重置

        body,dl,dd,p,h1,h2,h3,h4,h5,h6{margin:0;}ol,ul{margin: 0;padding: 0;list-style: none;}img{border: none;}a{text-decoration: none;color: black;}

第三种，新建一个css文件，将上面的代码进行引入。