CSS选择器与盒子模型

最新推荐文章于 2023-03-05 11:52:51 发布

Ukashi

最新推荐文章于 2023-03-05 11:52:51 发布

阅读量457

点赞数

本文链接：https://blog.csdn.net/weixin_51155543/article/details/116188085

版权

文章目录

前言
一、CSS是什么？
二、CSS选择器
- 1.基础选择器
- 2.复合选择器
三.盒子模型
总结

前言

一、CSS是什么？

css是一种可以用来表现HTML或XML等文件样式的计算机语言。css不仅可以静态修饰网页，还可以配合各种脚本语言动态地对网页元素进行格式化。

二、CSS选择器

1.基础选择器

1.标签选择器：
标签选择器指用HTML的标签作为选择器，从而将所有此类标签选择出来进行修饰。


.div {
background-color: blue;
}

2.类选择器：
创建一个类名，在里面添加属性。

语法： .类名 {
  属性1:属性值;
  ...
 }
 .blue {
 color: blue;
 }

引用类选择器时：

<div class="blue"> 蓝色</div>

在引用类选择器时，可以一次性引用多个，两两之间需用空格隔开，例如：

<div class="blue cover">多类名</div>

3.id选择器
同类选择器一样，创建一个id，在里面添加属性，但是和类选择器不同的是，id选择器只能使用一次，而类选择器可以多次使用。

#green {
color: green;
}

引用id选择器时：

<p id="green">段落文字为绿色</p>

4.通配符选择器：
通配符选择器可以修饰页面中所有的元素。

* {
weight: 200px;
height: 200px;
}

通配符选择器不需要引用，自动修饰所有元素。

2.复合选择器

1.后代选择器：
后代选择器可以选择父元素中的子元素进行修饰。将外层元素写在前面，内层元素写在后面，中间用空格分开。

语法  元素1 元素2 {样式声明}
ul li {
font:weight: bold;
}

2.子选择器：
子类选择器选择元素最近的子元素进行修饰。

语法 元素1>元素2 {样式声明}
div>a {
   color:red;
}
...
<div>
 <a href="www.baidu.com">百度</a>
 <ul>
  <li><a href="#">1</a></li>
  <li><a href="#">2</a></li>
 </ul>
</div>

3.并集选择器
并集选择器可以同时给多个标签元素定义样式，通常用于集体声明。

语法 元素1,元素2 {样式定义}
div,p,.pig li {
color: red;
font-weight:bold;
}
...
<div>盒子</div>
<p>并集选择器</p>
<ul class="pig">
 <li>小猪</li>
</ul>
<ul>
 <li>小狗</li>
</ul>

效果如下：
在这里插入图片描述

4.伪类选择器：
伪类选择器可以向某些选择器添加特殊效果，在此以链接伪类选择器为例：

a:link  /*选择所有未被访问的链接*/

a:visited  /*选择所有已被访问的链接*/

a:hover /*选择鼠标指针位于其上的链接*/

a:active /*选择活动链接，即鼠标按下未弹起的链接*/

在写伪类链接时，需要按照:link ,:visited,:hover,:active的顺序声明！

三.盒子模型

盒子模型用于封装HTML中的元素，它包括外边距Margin，内边距Padding，内容conten，边框Border。运用盒子模型可以极大地帮助我们布局页面。
在这里插入图片描述

1.边框

border可以修饰边框的样式（border-style），大小（border-width），颜色（border-color）。

语法
div {
 border:border-width || border-stytle || border-color
 /*简写*/
 border: 1px solid blue;
 /*注意没有顺序！！！*/
 }

边框的层叠性：

div {
     height: 300px;
     width: 300px;
     border: 1px solid pink;
     border-top: ipx dashed black;
}

border-top的声明将会覆盖上面border的部分声明,效果如下：
在这里插入图片描述

合并边框
两个边框连接在一起时，中间的边框线会加粗，此时可以合并两个边框，使用border-collapse属性可以实现。

table,
td,
th {
    border: 3px soid pink;
    border-collapse:collapse; //相邻两个边框合并在一起
}

2.内边距

padding可以设置边框与内容之间的距离。

语法 padding-left: , padding-right: , padding-top: , padding-bottom:
简写：
        padding: 5px; //代表上下左右内边距都是5px
        padding: 5px 10px; //代表上下内边距5px，左右内边距10px
        padding: 5px 10px 5px //代表上边距为5px，左右为10px，下边距为5px
        padding: 5px 10px 10px 5px //代表上边距5px，右边距10px，下边距10px，左边距5px

内边距可以调整盒子中各个内容间距离

.nav {
              height: 41px;
              border-top: rebeccapurple 3px solid;
              border-bottom: teal 1px solid;
              background-color: rgb(234, 222, 247);
              line-height: 41px;

        }
        .nav a {
              padding: 0 20px; //调整元素内边距！！
              text-decoration: none;
               color: #4c4c4c;
               font-size: 12px;
        }
        .nav a:hover {
            background-color: thistle;
        }

效果如下（前后对比）：
在这里插入图片描述

在这里插入图片描述

盒子本身没有设置weight/height时，padding不会撑开盒子大小

div {
            height: 200px;
            background-color:pink;
            padding: 30px;
        }

！！注意：边框和内边距会影响盒子大小，可以通过weight,height各自减去两边的内边距来解决。

3.外边距

margin可以调整盒子与盒子之间的距离

语法   margin-left:, margin-right:, margin-top:, margin-bottom:
简写(同padding一样）：
       margin: 5px //代表上下左右外边距为5px
       margin: 5px 10px //代表上下外边距为5px，左右外边距为10px
       margin: 5px 10px 5px //代表上边距为5px，左右为10px，下外边距为5px
       margin；5px 10px 10px 5px //代表上边距为5px，右边距为10px，下边距为10px，左边距为5px

外边距应用——使盒子水平居中
满足条件：
1.盒子指定了宽度
2.盒子左右外边距都设置为auto

.nav {
            width: 900px;
            height: 200px;
            margin: 0 auto;
            background-color: thistle;
        }
...
 <div class="nav">盒子</div>

效果如下（前后对比）：
在这里插入图片描述

外边距的合并问题
1.两个相邻外边距合并：两个外边距相接，两相邻边距合并，合并值为两个外边距中的较大一方。
解决方法：只给一个盒子添加对应外边距
2.两外边距嵌套在一起时合并
解决方法：给父元素定义相应边框；或者给父元素定义内边距；也可以为父元素添加overflow:hidden,总之就是要将两个外边距分开。

4. 清除内外边距

网页元素中有很多默认的内外边距，在设计页面的时候，可以将这些默认值消除。

        * {
            padding: 0;
            margin: 0;
        }

效果如下（前后对比）：
在这里插入图片描述

5.盒子阴影&文字阴影

通过box-shadow可以为盒子添加阴影

box-shadow:h-shadow v-shadow blur spread color inset

值	描述
h-shadow	必需属性。调整水平阴影位置，可为负值。
v-shadow	必需属性。调整阴影的位置，可为负值。
blur	可选属性。调整模糊的距离。
spread	可选属性。调整阴影的尺寸。
color	可选属性。调整阴影的颜色。
inset	可选属性。将外部阴影改为内部阴影。

通过text-shadow可以为文字添加阴影

text-shadow:h-shadow v-shadow blur color

值	描述
h-shadow	必需属性。调整水平阴影位置，可为负值。
v-shadow	必需属性。调整阴影的位置，可为负值。
blur	可选属性。调整模糊距离。
color	可选属性。调整阴影的颜色。