首页 > > 网页制作 > css >

css — 选择器、盒子模型

2019-09-17 09:59:48来源：博客园阅读 ()

css — 选择器、盒子模型

1. css引入方式
2. css选择器
3. css的盒模型

css: 层叠样式表

1. css引入方式

行内样式
```
<div style='color:red;'>mjj</div>
```

内嵌式

在head标签内部书写style

<style>
/*css代码*/
#box{
            background-color: greenyellow;
        }
</style>

外接式

<link href='css/index.css' rel='stylesheet'>

三种引入方式的优先级:

1.行内样式>内嵌式和外接式,
2.内嵌和外接要看谁在后面，在后面的优先级高

2. css选择器

2.1 基础选择器

1.id选择器

特定属性的元素（标签）、唯一的

语法： #xxx

2.类选择器

可以重复归类，类也可以设置多个

语法： .xxx

<style>
??.box{
????width:200px;
????height:200px;
????background-color:yellow;
?}
  <!--单独设置 类1 中某个样式与 类2 不一样-->
??.active{
????border-radius: 200px; <!--设置盒子边框-->
?}
</style>
<div class='box active'></div> <!--类1-->
<div class='box'></div>  <!--类2-->
<div class='box'></div>  <!--类2-->

3.标签选择器

标签选择器有：div{} 、p{} 、ul 、ol ...

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        a{
            /*设置文本修饰*/
            text-decoration: none;
        }
        input{
            border:none;
            outline:none;
        }
        #user{
            border: 1px solid #555;
            height: 60px;
            font-size: 20px;
            padding: 0 10px;
        }
        .box {
            width: 200px;
            height: 200px;
            background-color: yellow;
        }
        .active {
            border-radius: 4px;
        }
        #box{
            color: red;
        }
        div{
            border:1px solid #000;
        }
    </style>
</head>
<body>
<div class='box active' id="box">wusir</div>
<hr>
<div class='box'></div>
<hr>
<div class='box'></div>
<a href="">百度一下</a>
<input type="text" id="user">
</body>

2.2 高级选择器

1.后代选择器

语法：

/*用空格连接*/
div p{
??color: red;
}

2.子代选择器

语法：

/*用>连接*/
div>p{
??color: red;
}

3.组合选择器

常用于重置样式

语法：

/*用,连接*/
div,p,body,html,ul,ol....{
??padding: 0;
??margin: 0;
}
input,textarea{
            border:none;
            outline: 0;
        }

如何重置网页样式？

html,body,p,ul,ol{
    margin: 0;
    padding: 0;
}
/*通配符选择器 */
*{
    margin: 0;
    padding: 0;
}
a{
    text-decoration: none;
}
/*清除input和textarea标签的默认边框和外线*/
input,textarea{
    border: none;
    outline: none;
}

4.交集选择器

span.active

语法：

div.active{
?
}

2.3 伪类选择器

对于a标签，如果想设置a标签的样式，要作用于a标签上，对于继承性来说，a标签不起作用的

“爱恨准则” — LoVe HAte ：L - link 、V - visited 、H - hover 、A - active

/*LoVe HAte*/
/*a标签没有被访问时候设置的属性*/
a:link{
    /*color: red;*/
}
/*a标签被访问过后设置的属性*/
a:visited{
    color:yellow;
}
/*a标签被鼠标悬浮时设置的属性*/
a:hover{
    color: deeppink;
}
/*a标签被摁住的时候设置的属性*/
a:active{
    color: deepskyblue;
}

2.4 属性选择器

<style>
    input[type='text']{
        background-color: red;
    }
    input[type='checkbox']{

    }
    input[type='submit']{

    }
</style>

2.5 伪元素选择器

<style>
    /*设置内容中的第一个文字*/
    p::first-letter{
        color: red;
        font-size: 20px;
        font-weight: bold;
    }
    /*在内容前加一个@*/
    p::before{
        content:'@';
    }
    /*::after是解决浮动布局常用的一种方法*/
    /*在内容后面加一个$*/
    p::after{
        /*通过伪元素添加的内容为行内元素*/
        content:'$';
    }
</style>

注意：

1.通过伪元素添加的内容为行内元素
2.::after是解决浮动布局常用的一种方法
3.1个':'是伪类选择器，2个':'是伪元素选择器

3. css的盒模型

1.盒子模型的属性及含义：

width: 内容的宽度
height：内容的高度

padding：内边距（又叫内填充），盒子的border到内容的距离

1.单个属性分别设置不同方向的padding

padding-top  顶部填充的距离
padding-right  右侧填充的距离
padding-bottom  底部填充的距离
padding-left  左侧填充的距离

2.综合属性，多个属性用空格隔开。

/*综合设置：四个方向的内边距为：*/
padding: 20px;

/*盒子的上下内边距设置为第一个数值，左右内边距设置第二个数值*/


/*上  左右  下*/
padding: 0 20px 30px;

/*上  右  下  左*/
padding: 10px 20px 30px 40px;

border：盒子的边框

boder边框三要素：粗细、线性样式、颜色

1.按照三要素书写border

border-width:3px;  /*边框四边线的粗细*/
border-style:solid; /*边框线样式*/
border-color:red;  /*边框线颜色*/
/*上面三句代码相当于一句代码：*/
border:3px solid red;

/*同样,也可以分别设置边框四个方向的粗细 线性样式 颜色,跟padding的四个方向一样。*/
/*上下5px  左右10px*/
border-width:5px 10px;
/*上：实线  右：点状线  下：双线  左：虚线*/
border-style: solid dotted double dashed;
/*上：红色 左右：绿色 下：黄色*/
border-color: red green yellow;

2.按照方向划分

/*boder的顶部边框*/
border-top-width: 10px;
border-top-color: red;
border-top-style: solid;
/*可以简写成*/
border-top: 10px solid red;

/*boder的右侧边框*/
border-right-width: 10px;
border-right-color: red;
border-right-style: solid;
/*可以简写成*/
border-right: 10px solid red;

/*boder的底部边框*/
border-bottom-width: 10px;
border-bottom-color: red;
border-bottom-style: solid;
/*可以简写成*/
border-bottom: 10px solid red;

/*boder的左侧边框*/
border-left-width: 10px;
border-left-color: red;
border-left-style:solid;
/*可以简写成*/
border-left: 10px solid red;

3.清除默认边框

清除某些标签默认的边框：border:none; 或者 border:0;

清除某些标签默认的外边框：outline: none; 或者 border:0;
4.边框属性
- 1.设置为圆角或者圆
  
  语法： border-radius:20px;
```
<style>
        #box{
            width: 300px;
            height: 300px;
            background-color: red;
            /*border-radius: 50%;*/
            border-radius: 4px;
            border: 3px solid blue;
        }
         #box:hover{
             background-color: #000;
         }
    </style>
```
  除了同时设置四个圆角以外，还可以单独对每个角进行设置。对应四个角，CSS3提供四个单独的属性：
  - border-top-left-radius
  - border-top-right-radius
  - border-bottom-right-radius
  - border-bottom-left-radius
  这四个属性都可以同时设置1到2个值。如果设置1个值，表示水平半径与垂直半径相等。如果设置2个值，第一个值表示水平半径，第二个值表示垂直半径。
- 2.设置阴影效果
  
  语法：box-shadow: h-shadow v-shadow blur color inset;
  
  h-shadow 水平阴影的位置、距离
  
  v-shadow 垂直阴影的位置、距离
  
  blur 模糊距离、程度
  
  color 阴影的颜色
  
  inset 将外部阴影 (outset，默认值) 改为内部阴影。
```
<style>
    .box{
        width: 200px;
        height: 200px;
        background-color: #000;
        margin: 100px auto;
        position: relative;
        transition: all .2s linear;
    }
    .box:hover{
        top: -2px;
        box-shadow: 0 0  20px red;
    }
</style>
```

margin：盒子的外边距，一个盒子到另一个盒子的距离。
- 水平方向的外边距
```
/*左外边距*/
margin-left: 30px;
/*右外边距*/
margin-right: 20px;
```
- 垂直方向外边距
  
  margin在水平方向上不会出现问题，但在垂直方向上会出现外边距合并（或重叠）现象，这种现象叫做塌陷问题，会以设置的最大的magrin距离为基准。
  
  如何避免出现这种问题呢？
  - 为了避免出现塌陷问题，只需要设置一个盒子的一个方向的margin即可。
```
/*顶部外边距*/
margin-top:50px;
/*底部外边距*/
margin-bottom:30px;
```
- 也可以综合设置水平与垂直方向的外边距
```
/*水平居中*/
margin:0 auto;
```