前端学习day12

最新推荐文章于 2024-09-12 15:08:36 发布

糖醋排骨12356

最新推荐文章于 2024-09-12 15:08:36 发布

阅读量44

点赞数

文章标签：前端学习

本文链接：https://blog.csdn.net/weixin_68489142/article/details/131858973

版权

流式布局

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

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

特殊属性的百分比

元素的margin-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样式必须书写在{}中

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

外部引入媒体查询

<link rel="stylesheet" href="./css/base.css">
    <!-- 外部引入媒体查询的写法 -->
    <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 元素

 /* 属性css的值是abc */
        li[class="abc"] {
            border: 1px #f00 solid;
        }
        /* 属性css中包含show */
        li[class~="show"]{
            width: 200px;
            height: 200px;
            background: #04be02;
        }
        /* 属性class中的字符以abc开头或者abc-开头 */
        div[class|="abc"]{
            font-size: 30px;
            color: #f00;
        }
        /* 属性class值中的字符含有bc */
        div[class*="bc"]{
            border: 1px #f00 solid;
            margin: 10px 0;
        }
        /* 属性class的值以 li 开头 */
        div[class^="li"]{
            color: #04be02;
        }
        /* 属性class的值以 d 结尾 */
        div[class$="d"]{
            color: #00f;
        }
        /* 给所有的文本输入框设置样式 */
        input[type="text"]{
            color: #04be02;
        }