css基础2-优快云博客

本文链接：https://blog.youkuaiyun.com/alicca/article/details/134227318

css三大特性

1 层叠性

后面出现的样式覆盖前面同类的样式

div {
	color: red;
	font-size: 15px;
}
 div {
 color:pink;
 }

2 继承

子标签继承父标签的某些样式，主要是text类和color类，这里p里的文字也会变颜色，继承div属性

<div>
    <p>继承</p>
 </div>
 div {
  color: black;
  font-size: 15px;
 }

1）选择器相同时，层叠性
2）不同时，看选择器权重
但是继承或*的权重是0
div/p等标签权重是0001
class类和伪class，以及hover权重是0010
id的权重是0100,!important权重infinity

<ul class="nav">
    <li>111</li>
    <li>222</li>
</ul>

ul li {
	color: red;
}
.nav li {
	color: pink;
}

这里颜色一定变成purple, 同样情况下，如何把第一个li变成蓝色加粗？

<ul class="nav">
    <li class="one">111</li>
    <li>222</li>
</ul>

.nav .one {
	color: blue;
    font-size: 700px

}

行高继承：

body {
  color: black;
  font:15px/24px 'times new romans'
 }

在这里字体15px，行间距24px

body {
  color: pink;
  font: 15px/1.5 'times new romans'
 }

在这里1.5是指字体大小的1.5倍
若在body里设置div

div {
  font-size: 24px；
 }

此时div中字体行高会变成24px的1.5倍，其他没指定文字大小的默认就是body里设置的了

盒子模型

包括border，margin外边距（盒子和盒子之间），padding内边距（内容和border间）

注意：
1）margin能使盒子居中：margin: 100px auto;
2)让行内元素和行内块元素居中，找他们的父元素，让其text-align: center
3)当指定width和height后，再加padding会撑大盒子，除非你不指定width
4）行内元素指定padding只会有左右，没有上下间距

一般复合写法：border: 1px solid red;
也可以指定上下左右：border-left, border-top, border-right, border-bottom

主要有：border-width, border-style(solid, dashed, dotted) border-color

如何实现细边框：
border-collapse:collapse

padding: 5px 表示上下左右都5px
padding: 5px 10px; 表示上下5px 左右10px
padding: 5px 10px 20px; 上内边距5px，左右内边距10px，下内边距20px
padding: 5px 10px 20px 30px:上5px 右10px，下20px，30左，顺时针

案例：实现导航

<style>
        .nav {
            border-top: 3px solid #ff8500;
            border-bottom: 1px solid #edeef0;
            height: 41px;
            background-color: #fcfcfc;
            line-height: 41px;
        }

        .nav a {
            text-decoration: none;
            display: inline-block;
            height: 41px;
            padding: 0 20px;
            color: orangered;


        }

        .nav a:hover {
            color: pink;


        }
    </style>




<body>
    <div class="nav">
        <a href="#">1</a>
        <a href="#">222</a>
        <a href="#">3333</a>
    </div>

</body>

注意：

1）行内元素a，需要转换成行内块元素，使用display: inline-block来调整a的高度和宽度

2）padding:0 20px; 0是不能省略的，上下0，左右20

什么情况下padding不会撑开盒子？
在盒子内部没有指定width属性，或者如果父元素指定了width，那么在子元素中没有指定width，就不会撑开盒子。

外边距margin

margin-left: 20px;
margin-right: 20px;
margin: 20px 30px 40px 50px（同padding）
外边距合并
margin-bottom: 100px(把下面盒子提下去)
margin-top: 200px

元素塌陷问题：

设置父元素margin-top为10，子元素margin-top设置为30，但是小盒子没有往里面走，反而大盒子往下靠了30

<style>
        .father {
            width: 500px;
            height: 300px;
            background-color: aqua;
            margin-top: 20px;
            /* border: 1px solid transparent; */
            /* overflow: hidden; */
            /* padding-top: 1px; */
        }

        .son {
            width: 200px;
            height: 100px;
            background-color: blue;
            margin-top: 30px;
        }
    </style>

<body>
    <div class="father">
        <div class="son">
        </div>
    </div>

</body>

嵌套块元素塌陷问题解决：

 border-top: 1px solid transparent; 
 overflow: hidden; 
 padding-top: 1px;

清除内外边距

	* {
         margin: 0;
         padding: 0;
	    }

行内元素为了照顾兼容性，尽量只设置左右内外边距，不设置上下内外边距，设置了也没用。

除非转换为block或者inline-block