CSS 常见问题

布局

一、盒模型宽度计算

问题：div1 的 offsetWidth 是多少？

<style>

    #div1 {

        width: 100px;

        padding: 10px;

        border: 1px solid #ccc;

        margin: 10px;

    }

</style>

<div id="div1">

</div>

div1 的盒模型：

offsetWidth = （内容宽度 + 内边距 + 边框），无外边框。

offsetWidth = 100 + 10 + 1 * 2 = 122

如果让 offsetWidth = 100，可以给 div 加一个样式 box-sizing: border-box;

<style>

    #div2 {

        width: 100px;

        padding: 10px;

        border: 1px solid #ccc;

        margin: 10px;

        box-sizing: border-box;

    }

</style>

<div id="div2">

</div>

div2 的盒模型：

二、margin 纵向重叠的问题

问题：AAA 和 BBB 之间的距离是多少？

<style>

    p {

        font-size: 16px;

        /*

        	line-height 为数字的话

        	行高为 字体 * 该数字

        	当前行高为 16px

        */

        line-height: 1;

        margin-top: 10px;

        margin-bottom: 15px;

    }

</style>

<p>AAA</p>

<p></p>

<p></p>

<p>BBB</p>

相邻元素的 margin-top 和 margin-bottom 是会重叠的。
空白内容也会被重叠。

AAA 和 BBB 之间的距离是 15px

AAA 和 BBB 的盒模型是一样的：

三、margin 负值的问题

问题：对 margin 的 top left right bottom 设置负值，是什么效果？

margin-top：该元素向上移动
margin-bottom：该元素不受影响，该元素下面的元素上移
margin-left：该元素向左移动
margin-right：该元素不受影响，该元素右侧的元素左移

代码演示：

<style>

    body {

        margin: 20px;

    }

    .box {

        border: 1px solid red;

        padding: 20px;

    }

    .box-blue {

        width: 100px;

        height: 100px;

        border: 1px solid blue;

    }

    .box-red {

        width: 100px;

        height: 100px;

        border: 1px solid red;

    }

    .clearfix::after {

        content: '';

        display: table;

        clear: both;

    }

    .float-left {

        float: left;

    }

    .top {

        margin-top: -30px;

    }

    .bottom {

        margin-bottom: -30px;

    }

    .left {

        margin-left: -30px;

    }

    .right {

        margin-right: -30px;

    }

</style>

<div>用于测试 margin top bottom</div>

<div class="box">

    <div class="box-blue">item 1</div>

    <div class="box-red">item 2</div>

</div>

<div>用于测试 margin left right</div>

<div class="box clearfix">

    <div class="float-left box-blue">item 3</div>

    <div class="float-left box-red">item 4</div>

</div>

测试 margin-top：给 item1 添加 margin-top

测试 margin-bottom：给 item1 添加 margin-bottom

测试 margin-left：给 item3 添加 margin-left

测试 margin-right：给 item3 添加 margin-right

四、BFC 的理解与应用

问题：什么是 BFC？如何应用？

BFC：Block format context，块级格式化上下文

一块独立渲染区域，内部元素的渲染不会影响边界以外的元素

形成 BFC 的常见条件：

float 不是 none
position 是 absolute 或 fixed
overflow 不是 visible
display 是 flex、inline-block 等

<style>

    .box {

        background-color: #ccc;

    }

    .left {

        float: left;

    }

    .bfc {

        /* 触发 bfc */

        overflow: hidden;

    }

</style>

<div class="box">

    <img src="https://raw.githubusercontent.com/codeEgret/picBed/master/%E4%BB%99%E5%A5%B3%E6%A3%92.png" alt=""

         class="left" style="width: 100px">

    <p>这是一段文字......</p>

</div>

因为给 img 设置了 float ，图片完全跑出了容器，并没有撑开容器

给 div 添加一个 class="bfc"，用于触发 bfc，这样图片就不会脱离文档流。

五、float 布局

问题：如何实现圣杯布局和双飞翼布局？

圣杯布局和双飞翼布局的目的：

三栏布局，中间一栏最先加载和渲染（内容最重要）
两侧内容固定，中间内容随着宽度自适应
一般用于 PC 网页

圣杯布局的实现：

先创建好大概的内容

<style>

    body {

        min-width: 550px;

    }

    header {

        text-align: center;

        background-color: #ccc;

    }

    .col {

        float: left;

    }

    .main {

        width: 100%;

        background-color: pink;

    }

    .left {

        width: 190px;

        background-color: skyblue;

    }

    .right {

        width: 100px;

        background-color: cyan;

    }

    footer {

        text-align: center;

        background-color: #ccc;

        clear: both;

    }

</style>

</head>

<body>

    <header>header</header>

    <div class="content">

        <div class="main col">main</div>

        <div class="left col">left</div>

        <div class="right col">right</div>

    </div>

    <footer>footer</footer>

</body>

给外层容器添加左右内边距，padding-left、padding-right

<style>

    .content {

        padding-left: 190px;

        padding-right: 100px;

    }

</style>

将 left 移动到左侧，给 left 添加 margin 负值，left 需要使用定位才能实现。

<style>

    .left {

        width: 190px;

        backgroud-color: skyblue;

        display: relative;

        left: -190px;

        margin: -100%;

    }

</style>

将 right 移动到右侧，给 right 设置 margin-right 负值，这个负值为 right 的宽度，这样right 的内容就被覆盖了，就移动上去了。

<style>

    .right {

        width: 100px;

        background-color: cyan;

        margin-right: -100px;

    }

</style>

双飞翼布局的实现：

先创建好大概的内容

<style>

    body {

        min-width: 550px;

    }

    .col {

        float: left;

    }

    .main {

        width: 100%;

        height: 100px;

        background-color: pink;

    }

    .left {

        width: 190px;

        height: 100px;

        background-color: skyblue;

    }

    .right {

        width: 100px;

        height: 100px;

        background-color: cyan;

    }

</style>

<body>

    <div class="main col">

        <div class="main-wrapper">main</div>

    </div>

    <div class="left col">left</div>

    <div class="right col">right</div>

</body>

设置 main-wrapper 的左右外边距

<style>

    .main-wrapper {

        margin-left: 190px;

        margin-right: 100px;

    }

</style>

使用 margin-left 负值的方法，将 left 移上去，100% 代表的是 mian 的宽度。

<style>

    .left {

        width: 190px;

        height: 100px;

        background-color: skyblue;

        margin-left: -100%;

    }

</style>

使用 margin-left 负值的方法，将 right 移上去，100px 代表 right 的宽度。

<style>

    .right {

        width: 100px;

        height: 100px;

        background-color: cyan;

        margin-left: -100px;

    }

</style>

圣杯布局和双飞翼布局的技术总结：

使用 float 布局
两侧使用 margin 负值，以便和中间内容横向重叠
防止中间内容被两次覆盖，一个用 padding，一个用 margin

问题：手写 clearfix

在圣杯布局中的 footer 使用了 clear: both; 来清除浮动，我们可以手写一个 clearfix 来实现清除浮动。

.clearfix::after {

    content: '';

    display: table;

    clear: both;

}

/* 兼容 IE */

.clearfix {

    *zoom: 1;

}

六、flex 布局

常用语法：

flex-direction：属性决定主轴的方向（项目的排列方向）
- row（默认值）：主轴为水平方向，起点在左端。
- row-reverse：主轴为水平方向，起点在右端。
- column：主轴为垂直方向，起点在上沿。
- column-reverse：主轴为垂直方向，起点在下沿。
justify-content：主轴上的对齐方式
- flex-start（默认值）：左对齐
- flex-end：右对齐
- center：居中对齐
- space-between：两端对齐，间隔相等
- space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。
align-items：交叉轴上如何对齐
- flex-start：交叉轴的起点对齐。
- flex-end：交叉轴的终点对齐。
- center：交叉轴的中点对齐。
- baseline：第一行文字的基线对齐
- stretch （默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。
flex-wrap：是否换行
- nowrap（默认）：不换行
- wrap：换行，第一行在上方
- wrap-reverse：换行，第一行在下方
align-self：允许单个元素有不一样的对齐方式，比 align-items 多一个 auto 元素。
- auto（默认值）：表示继承父元素的属性，如果没有符元素，等同于 stretch。

问题：flex 实现骰子的六个面

<style>

    .box1,

    .box2,

    .box3,

    .box4,

    .box5,

    .box6 {

        display: flex;

        float: left;

        margin: 10px;

        width: 300px;

        height: 300px;

        border: 1px solid #000;

        border-radius: 10px;

    }

    .item {

        width: 40px;

        height: 40px;

        border-radius: 50%;

        background: #ccc;

    }

    .box1 {

        justify-content: center;

        align-items: center;

    }

    .box2 {

        flex-direction: column;

        justify-content: space-around;

        align-items: center;

    }

    .box3 {

        justify-content: space-around;

        align-items: center;

    }

    .box3 .item:nth-child(1) {

        align-self: flex-start;

        transform: translateY(30px);

    }

    .box3 .item:nth-child(3) {

        align-self: flex-end;

        transform: translateY(-30px);

    }

    .box4 {

        flex-direction: column;

    }

    .box4-wrap {

        display: flex;

        justify-content: space-around;

        align-items: center;

        height: 150px;

    }

    .box5 {

        flex-direction: column;

    }

    .box5-wrap {

        display: flex;

        justify-content: space-around;

        align-items: center;

        height: 100px;

    }

    .box6 {

        flex-direction: column;

    }

    .box6-wrap {

        display: flex;

        justify-content: space-around;

        align-items: center;

        height: 100px;

    }

</style>

<body>

    <div class="box1">

        <div class="item"></div>

    </div>

    <div class="box2">

        <div class="item"></div>

        <div class="item"></div>

    </div>

    <div class="box3">

        <div class="item"></div>

        <div class="item"></div>

        <div class="item"></div>

    </div>

    <div class="box4">

        <div class="box4-wrap">

            <div class="item"></div>

            <div class="item"></div>

        </div>

        <div class="box4-wrap">

            <div class="item"></div>

            <div class="item"></div>

        </div>

    </div>

    <div class="box5">

        <div class="box5-wrap">

            <div class="item"></div>

            <div class="item"></div>

        </div>

        <div class="box5-wrap">

            <div class="item"></div>

        </div>

        <div class="box5-wrap">

            <div class="item"></div>

            <div class="item"></div>

        </div>

    </div>

    <div class="box6">

        <div class="box6-wrap">

            <div class="item"></div>

            <div class="item"></div>

        </div>

        <div class="box6-wrap">

            <div class="item"></div>

            <div class="item"></div>

        </div>

        <div class="box6-wrap">

            <div class="item"></div>

            <div class="item"></div>

        </div>

    </div>

</body>

定位

一、absolute 和 relative 分别依据什么定位？

relative：他是依据自身定位的
absolute：他是依据第一个定位父元素定位

二、居中对齐有哪些实现方式？

问题：水平居中

inline 元素：text-centent: center;
block 元素：margin: 0 auto;
absolute 元素：left: 50% + margin-left: 负值

问题：垂直居中

inline 元素：line-height 的值等于 height 的值
absolute 元素：top: 50% + margin-top: 负值
absolute 元素：transform(-50%, -50%)
absolute 元素：top,left,right,bottom = 0 + margin: auto

第一种和第二种需要知道盒子的大小，不知道盒子大小的时候，可以使用第三种和第四种

图文样式

问题：line-height 如何继承

写具体数值，如 100px，则直接继承该值
写比例，如 2，则继承该比例
写百分比，如 200%，则继承计算出来的值

<style>

    .box1 {

        font-size: 20px;

        line-height: 30px;

        background-color: pink;

    }

    .box2 {

        font-size: 20px;

        line-height: 2;

        background-color: skyblue;

    }

    .box3 {

        font-size: 20px;

        line-height: 200%;

        background-color: cyan;

    }

    p {

        font-size: 25px;

    }

</style>

<div class="box1">

    <p>高度为30px</p>

</div>

<div class="box2">

    <p>高度为50px</p>

</div>

<div class="box3">

    <p>高度为40px</p>

</div>

CSS 常见问题笔记的更多相关文章

CSS学习笔记
CSS学习笔记 2016年12月15日整理 CSS基础 Chapter1 在console输入escape("宋体") ENTER 就会出现unicode编码显示"%u ...
HTML+CSS学习笔记 (7) - CSS样式基本知识
HTML+CSS学习笔记 (7) - CSS样式基本知识内联式css样式,直接写在现有的HTML标签中 CSS样式可以写在哪些地方呢?从CSS 样式代码插入的形式来看基本可以分为以下3种:内联式.嵌 ...
HTML+CSS学习笔记 (6) - 开始学习CSS
HTML+CSS学习笔记 (6) - 开始学习CSS 认识CSS样式 CSS全称为"层叠样式表 (Cascading Style Sheets)",它主要是用于定义HTML内容在浏 ...
HTML+CSS学习笔记（5）- 与浏览者交互，表单标签
HTML+CSS学习笔记(5)- 与浏览者交互,表单标签 1.使用表单标签,与用户交互网站怎样与用户进行交互?答案是使用HTML表单(form).表单是可以把浏览者输入的数据传送到服务器端,这样服务 ...
HTML+CSS学习笔记(4) - 认识标签（3）
HTML+CSS学习笔记(4) - 认识标签(3) 1.使用<a>标签,链接到另一个页面使用<a>标签可实现超链接,它在网页制作中可以说是无处不在,只要有链接的地方,就会有这 ...
HTML+CSS学习笔记（3）- 认识标签（2）
HTML+CSS学习笔记(3)- 认识标签(2) 1.使用ul,添加新闻信息列表在浏览网页时,你会发现网页上有很多信息的列表,如新闻列表.图片列表, 这些列表就可以使用ul-li标签来完成.ul-l ...
HTML+CSS学习笔记(2) - 认识标签（1）
HTML+CSS学习笔记(2) - 认识标签(1) 1.语义化,让你的网页更好的被搜索引擎理解标签的用途: 我们学习网页制作时,常常会听到一个词,语义化.那么什么叫做语义化呢,说的通俗点就是:明白每 ...
HTML+CSS学习笔记(1) - Html介绍
HTML+CSS学习笔记(1) - Html介绍 1.代码初体验,制作我的第一个网页 <!DOCTYPE HTML> <html> <head> <meta ...
CSS常见问题及兼容性
CSS常见问题 1 (IE6,7)H5标签兼容解决方法1:(只显示核心代码) 1<script> ; ; ; ;;;};;;;;;;; ...

随机推荐

LA3708墓地雕塑
题意: 有N个墓碑,等距离的分布在一个圆形墓地的周围,然后又要添加m个墓碑,最后要求所有的墓碑还是等距离,添加的墓碑可以放在任意位置,问之前的N个墓碑的最少移动距离之和是多少? 思路: ...
hdu2276 矩阵构造
题意: 给了n个灯泡的状态,他们绕成一个环,0是灭,1是亮,每一秒灯泡的状态都会改变,规则是如果当前这个灯泡的左边的灯泡当前是状态1,那么下一秒当前的这个灯泡状态就改变0变1,1变0,最后问 ...
[花式栈溢出]栈上的 partial overwrite
[花式栈溢出]栈上的 partial overwrite 希望能在这几天对Pwn中的栈上的各种利用和其他一些较小的分支做一个收尾,以便全力投入学习堆的相关知识.初步计划是对照ctf-wiki查缺补漏. ...
layui中流加载layui.flow
1.引入layui.css和layui.js 2. html中定义容器 <div id="demo"></div> js部分: layui.use('flo ...
检查dtd和Xschema文件限制下的xml文件是否符合的Java文件
先来xml文件: 1 <?xml version="1.0" encoding="utf-8"?> 2 <!DOCTYPE orders SY ...
.NET 反射(Reflection)
这节讲一下.NET 中的一个技术:反射(Reflection). 反射是一种很重要的技术,它可以在程序运行时,动态的获取类的实例,并调用实例中的任何方法.它就像一面镜子,映射出一个类的所有细节. ...
Asp.NetCore Web应用程序中的请求管道和中间件
你是否会迷惑当我们请求一个ASP.NetWeb应用程序以后,它是怎么处理这些请求的,后台是怎么工作的,今天就讲一下Asp.NetCore Web应用程序中的请求处理过程. 上一节,我们讲到,Start ...
使用git rebase去掉无谓的融合
git pull 預設的行為是將遠端的 repo. 與本地的 repo. 合併,這也是 DVCS 的初衷,將兩個 branch 合併.但是,很多時候會發生以下這種情形: 這是因為,我們團隊的開發模式是 ...
在写脚本时，在一开始（Shebang 之后）就加上这一句，或者它的缩略版： set -xeuo pipefail
编写可靠 bash 脚本的一些技巧腾讯技术工程已认证的官方帐号 1,254 人赞同了该文章写过很多 bash 脚本的人都知道,bash 的坑不是一般的多. 其实 bash 本身并不是一个 ...
linux 视频输出xrandr设置命令
linux 视频输出xrandr设置命令沈祥佑关注 0.592019.03.28 17:44:09字数 397阅读 6,886 xrandr 不带参数的xrandr 命令会列出系统支持的视频接口名称 ...

CSS 常见问题笔记

CSS 常见问题

布局

定位

图文样式

CSS 常见问题笔记的更多相关文章

随机推荐

热门专题