【无标题】

2024-01-11 16:55:16

11.15-11.21周报总结

css学习

1.css三大样式

1.1层叠性

概念：相同选择器给设置相同的样式，此时一个样式就会覆盖（层叠）另一个冲突的样式。
作用：层叠性主要解决样式冲突矛盾的问题
原则：
样式冲突，遵循的原则是就近原则，哪个样式结构离得近，就执行哪个样式
样式不冲突，不会层叠

<style>
        div {
            color: salmon;
            font-size: 12px;
        }
        
        div {
            color: rgb(61, 161, 61);
        }
    </style>
</head>

<body>
    <div>哼哼哼</div>
</body>

1.2继承性

css中的继承：子标签会继承父标签的某些样式，如文本颜色和字号
作用：恰当的使用继承可以简化代码，降低css的复杂性
子元素可以继承父元素的样式（text-，font-，line-这些元素开头的可以继承，以及color属性）

 <style>
        div {
            color: green;
            font-size: 15px;
        }
    </style>
</head>

<body>
    <div>
        <p>哼哼哼哼</p>
    </div>
</body>

1.3行高的继承

语法：body{
font：12px/1.5}

行高可以跟单位也可以不跟
如果子元素没有设置行高，则会继承父元素的行高为1.5
此时子元素的行高是：当前子元素的文字大小*1.5
body行高1.5这样写法最大的优势是里面子元素可以根据自己文字大小自动调整行高

 <style>
        body {
            color: green;
            /* font: 12px/24px 'Microsoft YaHei'; */
            font: 12px/1.5 'Microsoft YaHei';
        }
        
        div {
            font-size: 14px;
            /* 子元素继承了父元素body的行高1.5 */
            /* 这个1.5就是当前元素文字大小font-size的1.5倍，所以当前div的行高就是21像素 */
        }
        /* 会继承body的行高，1.5*16 */
        
        p {
            font-size: 16px;
        }
        /* li没有手动指定文字大小，则会继承父亲的文字大小body 12px
        行高则为12*1.5 */
    </style>
</head>

<body>
    <div>哼哼哼哼</div>
    <p>哼哼哼</p>
    <ul>
        <li>哼哼哼哼哼哼</li>
    </ul>
</body>

1.4优先级

当同一个元素指定多个选择器，就会有优先级的产生
原则：
选择器相同，则执行层叠性
选择器不同，则根据选择器权重执行
选择器不同，则根据选择器权重

选择器	权重
继承或者*	0，0，0，0
元素选择器	0，0，0，1
类选择器伪类选择器	0，0，1，0
id选择器	0，1，0，0
行内样式style=""	1，1，0，0
!important重要的	无穷大

 <style>
        div {
            color: green!important;
        }
        
        .text {
            color: blue;
        }
        
        #demo {
            color: red;
        }
    </style>

</head>

<body>
    <div class="text" id="demo" style="color:purple">哼哼哼哼</div>
</body>

优先级注意点：

权重是有四组数字组成，但是不会有进位
可以理解为类选择器永远大于元素选择器，id选择器永远大于类选择器，以此类推
等级判断从左向右，如果某一位数值相同，则判断下一位数值
继承的权重是0，如果该元素没有直接选中，不管父元素权重多高，子元素得到的权重都是0

<style>
        /* 父亲的权重是100 */
        
        #father {
            color: green;
        }
        /* p继承的权重为0 */
        /* 所以以后看标签到底执行哪个样式，就先看这个标签有没有直接被选出来 */
        
        p {
            color: blue;
        }
        
        body {
            color: pink;
        }
        /* a链接浏览器默认指定了一个样式 蓝色的 有下划线的 */
        
        a {
            color: green;
        }
    </style>
</head>

<body>
    <div id="father">
        <p>哼哼哼</p>
    </div>
    <a href="#">单独样式</a>
</body>

权重叠加，需要计算权重
如：a:hover 0,0,1,1
.nav a 0,0,1,1
.nav ul li 0,0,1,2

 <style>
        /* ul li权重：0，0，0，1+0，0，0，0，1=0，0，0，2 */
        
        ul li {
            color: green;
        }
        /* li的权重是0，0，0，1 */
        
        li {
            color: blue;
        }
        
        .nav li {
            color: paleturquoise;
        }
    </style>
    <!-- 权重虽然有叠加，但永远不会进位 -->

</head>

<body>
    <ul class="nav">
        <li>哼</li>
        <li>哼</li>
        <li>哼</li>
    </ul>
</body>

2盒子模型

2.1看透网页布局的本质

网页布局过程：
先准备好相关网页元素，网页元素基本都是盒子box
利用css设置好盒子样式，然后摆到相应位置
往盒子里装内容
网页布局核心本质：利用css摆盒子

2.2盒子模型组成

所谓盒子模型：就是把html页面中的布局元素看作是一个矩形的盒子，也就是一个承装内容的容器
css盒子模型本质上是一个盒子，封装周围的html元素，它包括：边框、外边距、内边距和实际内容

名词	注释
border	边框
content	内容
padding	内边距
margin	外边距

2.3 边框

border可以设置元素的边框。
边框组成：边框宽度（粗细）、边框样式、边框颜色

属性	作用
border-width	定义边框粗细，单位是px
border-style	边框的样式
borde-color	边框的颜色

边框的复合写法：
border：5px solid blue;没有顺序
边框分开写法：
border-top：1px;solid;red;只设定上边框，其余同理

<style>
        div {
            width: 350px;
            height: 260px;
            border-width: 5px;
            /* solid实线边框，dashed虚线边框  dotted点线边框*/
            /* border-style: dashed; */
            border-style: dotted;
            border-color: cadetblue;
        }
    </style>
</head>

<body>
    <div>

    </div>
</body>

边框复合写法：

<style>
        div {
            width: 300px;
            height: 300px;
            /* border: 5px solid grey; */
            border-top: 5px solid rgb(60, 98, 180);
            border-bottom: 10px dashed rgb(207, 141, 152);
        }
    </style>
</head>

<body>
    <div>

    </div>
</body>

2.4表格的细线边框

border-collapse属性控制浏览器绘制表格边框的方式。它控制相邻单元格的边框
collapse是合并的意思

border-collapse：collapse，表示相邻边框合并在一起

2.5边框会影响盒子实际大小

边框会额外增加盒子的大小
解决方案：

测量盒子大小的时候不量边框
如果测量的时候包含了边框，则需要width/height减去边框宽度

<style>
        div {
            width: 100px;
            height: 100px;
            background-color: rgb(107, 107, 207);
            border: 5px solid pink;
        }
    </style>
</head>

<body>
    <div></div>

2.6内边距

padding属性用于设置内边距，即边框与内容之间的距离

属性	作用
padding-left	左内边距
padding-right	右内边距
padding-top	上内边距
padding-bottom	下内边距

 <style>
        div {
            width: 200px;
            height: 200px;
            background-color: rgb(58, 105, 167);
            padding-left: 20px;
            padding-top: 30px;
        }
    </style>
</head>

<body>
    <div>
        哼哼哼哼哼哼哼哼哼
    </div>
</body>

2.7内边距复合写法

padding属性可以有1到4个值

值的个数	表达意思
padding：5px	1个值，代表上下左右都有5像素内边距
padding：5px 10px	2个值，代表上下内边距是5像素，左右是10像素
padding：5px 10px 20px	3个值，代表上内边距5像素，左右内边距10像素，下是20像素
padding：5px 10px 20px 30px	4个值，代表上是5像素，右10像素，下20像素，左30像素，顺时针

<style>
        div {
            width: 150px;
            height: 100px;
            background-color: rgb(73, 113, 187);
            /* padding-top: 5px;
            padding-bottom: 5px;
            padding-left: 5px;
            padding-right: 5px; */
            padding: 5px;
        }
    </style>
</head>

<body>
    <div>哼哼哼哼哼哼哼哼哼哼哼</div>
</body>

内边距会影响盒子实际大小

如果盒子已经有了宽度和高度，此时再指定内边距，会撑大盒子
解决方案：
如果保证盒子跟效果图大小保持一致，则让width/height减去多出来的内边距大小即可

padding不会撑开盒子的情况
如果盒子本身没有指定width/height属性，则此时padding不会撑开盒子大小

    <style>
        h1 {
            height: 40px;
            background-color: rgb(98, 98, 179);
            padding: 30px;
        }
        
        div {
            width: 300px;
            height: 100px;
            background-color: rgb(71, 158, 71);
        }
        
        div p {
            /* width: 100%; */
            padding: 30px;
            background-color: skyblue;
        }
    </style>
</head>

<body>
    <h1></h1>
    <div>
        <p></p>
    </div>
</body>

2.7外边距

margin属性用于设置外边距，即控制盒子和盒子之间的距离

属性	作用
margin-left	左外边距
margin-right	右外边距
margin-top	上外边距
margin-bottom	下外边距

margin简写方式代表的意义与padding完全一致

    <style>
        div {
            width: 400px;
            height: 300px;
            background-color: rgb(86, 155, 86);
        }
        
        .one {
            margin-bottom: 20px;
        }
    </style>
</head>

<body>
    <div class="one">1</div>
    <div>2</div>
</body>

外边距典型应用

盒子必须了宽度width
盒子左右的外边距都设置为auto

常见写法：

margin-left：auto；margin-right:auto
margin:auto;
margin:0 auto 最常用

以上方法是让块级元素水平居中，行内元素或者行内块元素水平居中给其父元素添加text-align：center即可

    <style>
        div {
            width: 300px;
            height: 200px;
            background-color: rgb(90, 175, 90);
            margin: 100px auto;
        }
    </style>
</head>

<body>
    <div></div>
</body>

行内元素及行内块元素

    <style>
        div {
            width: 200px;
            height: 200px;
            background-color: rgb(93, 93, 190);
            margin: 100px auto;
            text-align: center;
        }
    </style>
</head>

<body>
    <div>
        <span>水平居中</span>

    </div>
</body>

2.8外边距合并

使用margin定义块元素的垂直外边距时，可能会出现外边距的合并
相邻块元素垂直外边距的合并：
当上下两个相邻的块元素相遇时，如果上面的元素有下外边距margin-bottom，下面的元素有上外边距margin-top，则他们之间的垂直间距不是margin-bottom和margin-top之和。取两个值中的较大者这种现象被称为相邻块元素垂直外边距的合并

解决方案：尽量只给一个盒子添加margin值

嵌套块元素垂直外边距的塌陷：
对于两个嵌套关系（父子关系）的块元素，父元素有上外边距同时子元素也有上外边距，此时父元素会塌陷较大的外边距值
解决方案：

可以为父元素定义上边框
可以为父元素定义上内边距
可以为父元素添加overflow：hidden

<style>
      .father {
            width: 400px;
            height: 400px;
            background-color: skyblue;
            margin-top: 50px;
            /* border: 1px solid green; */
            /* border: 1px solid transparent; */
            /* padding: 1px; */
            overflow: hidden;
        }
        
        .son {
            width: 200px;
            height: 200px;
            background-color: rgb(209, 97, 209);
            margin-top: 100px;
        }
    </style>
</head>

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

</body>

2.9清除内外边距

网页元素很多都带有默认的内外边距，而且不同浏览器默认的也不一致，因此在布局前，首先要清楚下网页元素的内外边距

注意：行内元素为了照顾兼容性，尽量只设置左右的内外边距，不要设置上下内外边距。但是转换为块级和行内块元素就可以了

    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        span {
            background-color: pink;
            margin: 20px;
        }
    </style>
</head>

<body>
    123
    <ul>
        <li>1234</li>
    </ul>
    <span>行内元素尽量只设置左右的内外边距</span>
</body>

3.ps基本操作

操作步骤：

文件-打开：可以打开我们要测量的照片
crtl+r可以打开标尺，或者视图-标尺
点击标尺，把里面单位改为像素
crtl+加号键可以放大视图，crtl±缩小视图
按住空格键，鼠标可以变成小手，拖动视图
用选区拖动，可以测量大小
crtl+d可以取消选取，或者在旁边空白处点击一下

4.圆角边框

盒子变为圆角
border-radius属性用于设置元素的外边框圆角
radius:半径，（椭）圆与边框交集形成圆角效果
圆角边框写法：参数值可以为数值或者百分比的情况

如果是正方形，想要设置为一个圆，把数值修改为高度或者宽度的一半即可，或直接写为50%
如果是个矩形，设置为高度的一半就可以

该属性是一个简写属性，可以跟四个值，分别代表左上角，右上角，右下角，左下角

    <style>
        .yuan {
            background-color: pink;
            width: 200px;
            height: 200px;
            /* border-radius:100px; */
            border-radius: 50%;
        }
        
        .juxing {
            background-color: rgb(48, 117, 197);
            width: 200px;
            height: 100px;
            border-radius: 50px;
        }
        
        .different {
            width: 100px;
            height: 100px;
            background-color: rgb(110, 45, 45);
            border-radius: 20px 30px;
            /* 两个数字代表对角线 */
        }
    </style>

</head>

<body>
    <div class="yuan"></div>
    <div class="juxing"></div>
    <div class="different"></div>
</body>

码农公寓