如何分开设置英文和中文字体样式

因为英文不包含中文,中文包含英文,所以可以先设置英文字体,之后设置中文字体.

选择器

<style>
        input~p{
            font-size: 30px;
            font-weight: bold;
        }
        /*通用兄弟选择器*/
       div+p{
            color: deeppink;
        }
        /*相邻选择器*/
       :not(a){
            color: coral;
            font-size: 12px;
        }
        /*选中不是a标签的所有标签*/
</style>

CSS3新增选择器

<style>
        p:first-child{
            color: red;
        }
        /*选中第一个元素*/
        
        p:last-child{
            color: blue;
        }
        /*选中最后一个元素*/
        
        p:first-of-type{
            color: green;
        }
        /*选中同类型中第一个元素*/
        
        p:last-of-type{
            color: pinkk;
        }
        /*选中同类型中最后一个元素*/
        
        p:nth-child(n){
            font-size: 40px;
        } 
        /*选中第几个元素*/
        
        p:nth-of-type(n){
            color: skyblue; 
        } 
        /*选中同类型中第几个元素*/
        p:nth-last-of-type(n){
            font-size: 30px;
        }
        /*选中同类型中倒数第几个*/
        p:only-child{
            color: deeppink;
        }
        /*选中只有一个子元素的元素*/
        p:nth-child(odd){
            color: pink;
        }        
        /*选中奇数*/
        p:nth-child(even){
            font-size: 30px;
        }
        /*选中偶数*/
        p:nth-child(xn+y){
            color: pink;
        }
        /*n为0递增乘以x+1的数改变属性*/
</style>

属性选择器

   <style>
       input[type=text]{
           width: 100px;
           height: 30px;
           display: block;
       }
       /*属性等于xx时改变属性*/
        p[class]{
            color: pink;
        }
       /*含有属性的元素改变样式*/
       img[alt^=woshi]{
           color: red;
       }
       /*选中属性以woshi开头的元素*/
       img[alt$=c]{
           color: pink;
       }
       /*选中以c结尾的元素*/
       img[alt*=shi]{
           color: green;
       }
       /*选中包含shi的元素*/
   </style>

css三大特性

1.继承性
以color，line，text，font开头的可以继承
h标签不继承大小,a标签的下划线和文字颜色不继承父元素;
2.层叠性
css处理冲突的方式,多个选择器选中同一个标签设置同样的属性后写的覆盖先前的
3.优先级
判断权重
!important>id>类>通配符>继承>浏览器默认

关于实体字符产生空格的问题

在日程代码中换行会有默认的实体字符;因外边距会产生一个空格的外边距可以对父元素设置font-size:0;来解决

   <style>
       div{
           font-size: 0;
       }
       div>span {
           display: inline-block;
           width: 100px;
           height: 100px;
           font-size: 24px;
           color: pink;
           border: 1px solid #000;
       }
   </style>

关于外边距的问题

1外边距塌陷

    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .top{
            width: 100px;
            height: 100px;
            background-color: red;
            border: 1px solid #000;
            margin-bottom: 100px;
        }
        .bottom{
            width: 100px;
            height: 100px;
            background-color: red;
            border: 1px solid #000;
            margin-top: 150px;
        }
    </style>

两个div设置margin-top和margin-bottom重叠时不会相加只会取最大值上面代码top和bottom之间的距离为150px;
而margin-left和margin-right则会相加

嵌套关系设置子元素的外边距和内边距的注意点

设置子元素顶部的外边距会改变父元素的位置可以为父元素添加border属性或者添加overflow：hidden；属性
如果是嵌套关系优先使用padding,并级之间可以使用margin

浮动和清除浮动

1：给父元素添加高度，但是正常开发中尽量少写高度所以不建议使用。
2：为需要浮动的元素添加clear：both；属性，但是使用了clear：both；属性会使margin属性失效
3：外墙法，在两个浮动的元素之间添加一个新的元素给新的元素添加clear：both属性，但是需要注意设置margin时会错位，如果需要调整位置可以为新增的元素设置宽高
3：内墙法，在父元素的内部所有子元素的底部添加一个新的元素并设置clear：both；
4：为父元素设置overflow：hidden；*zoom：1；来清除浮动；
5：伪类
通过添加伪类清除浮动

    <style>
        .clearfix::after{
            content: '';
            display: block;
            height: 0;
            visibility: hidden;
            clear: both;
        }
        .clearfix{
            *zoom: 1;
            /*为了兼容IE；*/
        }
    </style>

关于定位

相对定位

1：相对定位不脱离文档流
2：给定位元素添加margin属性都是相对于元素未定位之前定义margin
3：相对定位相对于自身原来的位置定位

绝对定位

1：绝对定位脱离文档流
2：绝对定位不区分块级和行内元素

注意点

1：默认情况下绝对定位相对于body定位，并且是以网页首屏的宽高来作为参考点
2：祖先元素如果是定位流，绝对定位相对于最近的定位流祖先作为参考点
3：绝对元素会忽略父元素的padding

CSS基础