web前端第二周总结

最新推荐文章于 2021-11-27 14:30:48 发布

甜心女王

最新推荐文章于 2021-11-27 14:30:48 发布

阅读量339

点赞数 1

文章标签： css html

本文链接：https://blog.csdn.net/AAA28256/article/details/113100366

版权

第二周总结

2021.1.18

网页布局的核心本质是：利用css样式摆放盒子；盒子模型四个组成部分：border边框，content内容，padding内边距，margin内边距
边框border：注（边框会影响盒子的实际大小，额外加了边框的宽高）

            /* 边框宽度 */
            border-width: 5px;
            /* 边框样式：实线虚线点线 */
            border-style: solid;
            border-style: dashed;
            border-style: dotted; 
            border-color: pink;
            /* 边框的复合写法,顺序没有关系 */
            border: 5px solid pink;
            /* 上下左右边框 */
            border-top: 1px solid red;
            border-bottom: 10px dashed #000;
            border-left: 5px solid #000;
            border-right: 3px dotted #ff0066;
            /* 合理利用层叠性，冲突的属性注意就近原则 */
            border: 1px solid blue;
            border-top: 1px solid red;

表格细线边框：

th {
            border: 3px solid pink;
            /* 合并表格内部单元格叠合的边框 */
            border-collapse: collapse;
            font-size: 16px;
            /* 内容全部居中对齐 */
            text-align: center;
        }

内边距padding：注（如果盒子已经指定了宽和高，那么设置内边距内边距会撑大盒子，所以要保证盒子大小不变只能改宽和高）

            padding-top: 10px;
            padding-left: 10px;
            /* padding的简写属性 */
            /* 一个数代表上下左右 */
            padding: 10px;
            /* 两个数代表上下、左右 */
            padding: 10px 5px;
            /* 三个数代表上、左右、下 */
            padding: 10px 5px 20px;
            /* 四个数代表上、右、下、左顺时针 */
            padding: 10px 5px 20px 30px;

padding不会撑开盒子的情况：
（1）没有指定宽/高，设置padding就不会撑开宽/高
（2）儿子的宽没有设置，默认继承父级快元素的宽，此时及内边距不会撑开盒子
注：块标签只继承父级的宽而不继承高
外边距margin:

.two {
            margin: 20px;
            margin:10px 20px;
            margin: 10px 20px 10px;
            margin: 10px 20px 30px 10px;
        }

外边距的合并：
(1)相邻块元素垂直外边距的合并：相邻两个块元素相遇是外边距不是bottom和top的叠加，而是他们其中取较大的一个
解决方法：尽量只给一个块加外边距
(2)嵌套块元素父级塌陷问题（嵌套块元素的坑爹问题）:块元素嵌套，父盒子子盒子都有上边距，那么父盒子和子盒子会共同使用较大的一个边距（父盒子塌陷，父子上沿平齐）而没有达到子盒子在父盒子内部有边距的结果
解决方法：（1为父级设置边框（2为父级定义内边距（3为父级添加overflow：hidden

 .father {
            width: 400px;
            height: 400px;
            background-color: pink;
            margin-top: 50px;
            /* 父级元素加边框或者内边距或者overflow:hidden，会避免塌陷 */
            /* border:1px solid transparent; */
            /* padding: 1px; */
            overflow: hidden;

        }

清除内外边距：

* {
            padding: 0;
            margin: 0;
        }

2021.1.19

圆角边框：

 .radius {
            background-color: red;
            width: 300px;
            height: 200px;
            /* 四个值表示左上、右上、右下、左下顺时针顺序 */
            /* border-radius: 10px 20px 30px 10px;
            /* 两个值表示对角相等，左上右下、右上左下 */
            /* border-radius: 10px 20px ; */
            /* 三个值表示左上、右上左下、右下 */
            /* border-radius: 10px 20px 30px; */
            /* 指定方位的写法，指哪儿打哪儿 注意top/bottom在前left/right在后 */
            border-top-left-radius: 15px;
        }

盒子阴影：

div {
            width: 300px;
            height: 100px;
            background-color: pink;
            /* 盒子阴影：五个值分别指的是：水平阴影位置（可正可负）、垂直阴影位置（可正可负）、模糊程度、阴影大小、阴影颜色、（设置内阴影inset，默认是外阴影且不可写outset否则无效） */
            /* box-shadow: 10px 10px 10px 10px rgba(0, 0, 0, 0.3); */
            /* 文字阴影：四个值分别指的是：水平、垂直阴影位置（可正可负）、模糊程度、颜色 */
            text-shadow: 5px 5px 6px rgba(0, 0, 0, 0.3);
        }

浮动：
(1)传统网页三种布局方式：标准流（标签的默认排列方式）、浮动、定位。
(2)浮动典型应用：多个块元素一行显示（转化为行内块元素也能做，但是间隔无法控制）
(3)网络布局第一准则：多个块元素纵向排列找标准流，横向排列找浮动
(4)float多个盒子都加左浮动或都加有浮动，那就多个盒子边缘贴在一起显示；分别加左右浮动，则一个靠左一个靠右（遇到屏幕边界停止）
浮动特性：
(1)脱标：浮动的元素脱离标准流浮动到上层，原先位置不再保留，让与其他标准流元素
(2)多个盒子设置了浮动，一行显示顶端对齐，父级宽度不够则另起一行显示
(3)任何元素加了浮动都有行内块元素的特点（有宽高且一行显示），若盒子没有设置宽高则默认和父级一样宽，但添加浮动之后其宽度视内容决定
特别地：浮动盒子通常放到父级标准流盒子中约束，以便调整其在浏览器页面中的位置

2021.1.20

浮动注意点：
(1)浮动盒子特点：浮动盒子只会影响其后的标准流
(2)兄弟元素，一个浮动其他也应该设置浮动，否则会乱
清除浮动：父级盒子一般不方便给高度，最好让子盒子撑开视内容而定大小，但是如标准流父盒子中放浮动的子盒子，那么原则上浮动盒子在标准流中不占空间，所以此时父级盒子高度会变成0，影响后续布局
(1)清除浮动的条件：
a.标准流父级没高度
b.子盒子浮动
c.影响后续布局
(2)清除浮动本质：清除浮动元素脱离标准流造成的影响
(3)清除浮动策略：把浮动元素的影响约束在父级盒子内部
清除浮动的方法：
(1)额外标签法：额外加一个块标签（注意一定是块），设置属性clear：both
(2)给父级添加overflow:hidden
(3):after伪元素法:加样式代码+给父级加类名clearfix

.clearfix:after {
            content: "";
            display: block;
            height: 0;
            clear: both;
            visibility: hidden;
        }

        .clearfix {
            /* IE6、7专有 */
            *zoom: 1;
        }

(4)双伪类法清除浮动：加样式代码+父级加类名clearfix

.clearfix:before,
        .clearfix:after {
            content: "";
            display: table;
        }

        .clearfix:after {
            clear: both;
        }

        .clearfix {
            *zoom: 1;
        }

2021.1.22

定位：相对定位、绝对定位、固定定位、粘连定位
为什么学习定位？
（1）定位可以让盒子自由的在某个盒子内移动位置或者固定在屏幕中某个位置，并且可以压住其它盒子
（2）前面学习的浮动则是可以让多个块级盒子在一行无缝排列显示，经常用于横向排列盒子
定位组成：定位=定位模式+边偏移
（1）定位模式：position，值有四—static,relative,absolute,fixed
（2）边偏移：属性有四：----top,bottom,left,right
静态定位（了解）：即为默认定位方式、无定位（标准流），没有边偏移 position:static;
相对定位(自恋型)：移动位置时相对于它原来的位置来说的 position:relative;
相对定位的特点：
（1）移动位置是参照点是自己原来的位置
（2）移动后不脱标，仍保留原来位置，原位置不能被其他标准流元素占有(灵魂出窍，肉体还在)
绝对定位(拼爹型):移动位置时相对于其祖先元素来说的 position：absolute
绝对定位特点：
（1）绝对定位没有父级或祖先级没有定位，那么以浏览器为准
（2）祖先级有定位(静态定位除外），则以最近一级有定位的祖先元素为准
（3）脱标：绝对定位不在占有原先位置
子绝父相：子级是绝对定位的话，父级要用相对定位
原因：
（1）子级绝对定位，不会占有位置，可以放到父级盒子的任何一个地方而不会影响其他兄弟盒子
（2）父盒子需要加定位限制子盒子在父盒子内显示
（3）父盒子布局时，需要占有位置，因此父亲只能是相对定位
固定定位：元素固定于浏览器可视区的位置 position:fixed;
主要应用场景：可以在浏览器页面滚动时使元素位置不变
固定定位特点：
(1)以浏览器可视窗口(当前能看到的窗口大小）为参照点移动元素
注意：与父级无关、不随滚动条滚动而滚动
(2)固定定位不占有原先的位置，可将其看作特殊的绝对定位
固定定位小算法：
（1）让固定定位的盒子left:50%，走到浏览器可视区的一半位置
（2）让固定定位的盒子margin-left:版心宽度的一半距离，多走版心宽度的一半位置
粘性定位(了解)：相对定位和固定定位的混合 position: sticky;
粘性定位特点：

(1)一浏览器可视窗口为参照点移动元素(固定定位特点)

(2)粘性定位占有原先的位置(相对定位特点)

(3)必须添加top、bottom、right、left其中一个才有效
定位元素堆叠顺序（z-index）:在使用定位布局时，可能会出现盒子重叠的情况。此时，可以使用 “z-index” 来控制盒子的前后次序 (z轴)选择器 { z-index: 1; }
z-index 的特性：

（1）属性值：正整数、负整数或0，默认值是0，数值越大，盒子越靠上；

（2）如果属性值相同，则按照书写顺序，后来居上；

（3）数字后面不能加单位。

注意：z-index 只能应用于相对定位、绝对定位和固定定位的元素，其他标准流、浮动和静态定位无效。
绝对定位盒子垂直居中算法：绝对定位盒子之间加margin: 0 auto;是不会水平居中的，垂直居中同理

.box {
            position: absolute;
            /* left走50%，父容器宽度的一半 */
            left: 50%;
            /* margin为负值，往左走自己盒子宽度的一半 */
            margin-left: -100px;
            /* top走50%，父容器高度的一半 */
            top: 50%;
            /* margin为负值，往上走自己盒子宽度的一半 */
            margin-top: -100px;
            width: 200px;
            height: 200px;
            background-color: pink;
        }

定位的特殊特性：
(1)行内元素添加绝对或者固定定位，可以直接设置高度和宽度。
(2)块级元素添加绝对或者固定定位，如果不给宽度或者高度，默认大小是内容的大小。
(3)脱标的盒子(浮动、绝对（固定）定位)都不会出发外边距合并的问题
(4)绝对定位（固定定位）会完全压住盒子

注意：浮动元素不同，只会压住它下面标准流的盒子，但是不会压住下面标准流盒子里面的文字（图片），但是绝对定位（固定定位）会压住下面标准流所有的内容。
浮动之所以不会压住文字，因为浮动产生的目的最初是为了做文字环绕效果的。文字会围绕浮动元素

2021.1.24

css高级技巧：
（1）元素的显示与隐藏
（2）css用户界面样式
（3）垂直对齐
（4）溢出文字省略号代替显示
（5）css精灵技术
元素的显示与隐藏：
（1）display(重要)----none,block;隐藏不保留位置

（2）visibility----hidden,visible隐藏并保留位置

（3）overflow----hidden,visible,scroll,auto溢出部分隐藏
css用户界面样式：
（1）鼠标样式：cursor

<ul>
        <li style="cursor:default">默认</li>
        <li style="cursor:pointer">小手</li>
        <li style="cursor:move">移动</li>
        <li style="cursor:text">文本</li>
        <li style="cursor:not-allowed">禁止</li>
    </ul>

（2）轮廓线 outline:none;开发中常用取消表单轮廓线常写于样式最前outline: none;
（3）文本域防拖拽 resize: none;

textarea {
            width: 300px;
            height: 150px;
            outline: none;
            resize: none;
        }

垂直对齐：只对行内元素和行内块元素有效,对块元素无效
（1）更改行内元素与行内块元素的垂直对齐方式，图片和文字默认基线对齐
原因：图片默认与文字默认基线对齐，所以图片与盒子边框之间有空隙
方法：
a.将垂直对齐方式更改为除基线对齐以外的其他样式
b.将图片更改为块元素
（2）去除图片与盒子间的空隙
.溢出文字省略号代替显示:

.text {
            width: 150px;
            height: 25px;
            border: 2px solid blue;
            margin: 100px auto;
            /* 当文字显示不开时自动换行（默认效果） */
            /* white-space: normal; */
            /* 1.强制文本一行显示 除非遇到br */
            white-space: nowrap;
            /* 2,溢出部分隐藏 */
            overflow: hidden;
            /* 3.文字溢出处理：超出部分用省略号表示 */
            text-overflow: ellipsis;
        }

css精灵技术:为有效减少服务器接受和发送请求的次数，提高页面的加载速度

.icon1 {
            display: inline-block;
            width: 95px;
            height: 111px;
            background: url(images/abcd.jpg) no-repeat -6px -276px;
        }

        .icon2 {
            display: inline-block;
            width: 102px;
            height: 106px;
            background: url(images/abcd.jpg) no-repeat -121px -13px;
        }