day14/流式布局/媒体查询/选择器

最新推荐文章于 2024-10-14 16:05:05 发布

崔崔晚风

最新推荐文章于 2024-10-14 16:05:05 发布

阅读量43

点赞数

文章标签： html css

本文链接：https://blog.csdn.net/weixin_54367169/article/details/131967390

版权

流式布局

流式布局，就是百分比布局

高度的百分比是基于父元素的百分比进行渲染的，因此使用百分比作为高度，他的父级必须定高

特殊属性百分比
元素的magin-top，margin-bottom，padding-top，padding-bottom他们的百分比设置都是基于父元素宽度的百分比

line-height 如果设置百分比，不是基于父元素的line-height值,而是基于他子级字号的百分比

媒体查询

媒体查询根据不同设备的宽度，设置不同的样式
关键字是 @media
属性
only 指的是只针对某一种设备
not 不针对某一种设备
screen 电脑屏幕，手机，iPad 设备中的一种，print 打印机，speech 盲人听读机，all 指的是所有设备
and 链接后面括号中条件的关键字，and的左右两边必须又空格
（）在括号里面可以设置条件，它里面的条件一般都是 max-width min-width 的设置
{} 满足条件的时候的设置的css样式必须书写在{}中

注意事项：媒体查询不提供优先级，因此，需要把媒体查询的样式最后加载，基础样式写在媒体查询的前面，这样才不会覆盖媒体查询的样式

    @media only screen and (max-width:800px) and (min-width:600px){
            .wp{
                height: 150px;
            }
            .left{
                background: #ccc;
            }
        }
        @media only screen and (min-width:1000px) {
            .right{
                background: #ff0;
            }
        }

外部引入媒体查询

<link rel="stylesheet" href="./css/c800.css" media="only screen and (min-width:800px) and (max-width:1000px)">
    <link rel="stylesheet" href="./css/c1000.css" media="only screen and (min-width:1000px)">

属性选择器
以下 E代表标签名,attr 表示属性名，val表示属性值
1. E[attr] 选择所有具有attr属性的E元素
2.E[attr=val] 选择所有具有attr属性并且它的值是val的E元素
3.E[attr~=val]选择所有具有attr属性并且他的值包含val的E元素
4.E[attr|=val]选择所有具有attr属性并且他的值是以val或者val-开头的E元素
5.E[attr*=val]选择所有具有attr属性并且他的值具有val字符的E元素
6.E[attr$=val]选择所有具有attr属性并且他的值是以val字符结束的E元素
7.E[attr^=val]选择所有具有attr属性并且他的值是以val字符开始的E元素