CSS

最新推荐文章于 2023-12-14 15:29:58 发布

just so so

最新推荐文章于 2023-12-14 15:29:58 发布

阅读量433

点赞数

分类专栏：前端基础文章标签： CSS

本文链接：https://blog.csdn.net/weixin_44748964/article/details/97395586

版权

前端基础专栏收录该内容

3 篇文章 0 订阅

订阅专栏

1 CSS盒模型

标准盒模型和IE盒模型的区别：

在 标准盒子模型中，width 和 height 指的是内容区域的宽度和高度。增加内边距、边框和外边距不会影响内容区域的尺寸，但是会增加元素框的总尺寸。
IE盒子模型中，width 和 height 指的是内容区域+border+padding的宽度和高度。

CSS3中引入了box-sizing属性，box-sizing:content-box;表示标准的盒子模型，box-sizing:border-box表示的是IE盒子模型

最后，前面我们还提到了，box-sizing:padding-box,这个属性值的宽度包含了左右padding+width

2 画一条0.5px的线

//方法一：
<style>
.hr.scale-half{
    height: 1px;
    transform:scaleY(0.5);
    transform-origin: 50% 100%;
}
</style>

<p>1px+scaleY(0.5)</p>
<div class="hr scale-half"></div>

//方法二：效果是虚的
<style>
   .hr.gradient{
    height: 1px;
    background: linear-gradient(0deg,#fff,#000);
}
</style>

<p>linear-gradient(0deg,#fff,#000)</p>
<div class="hr gradient"></div>

//方法三：使用boxshadow
<style>
.hr.boxshadow{
    height: 1px;
    background: none;
    box-shadow: 0 0.5px 0 #000;
}
</style>
<p>box-shadow:0 0.5px 0 #000</p>
<div class="hr boxshadow"></div>
//这个方法在Chrome和Firefox都非常完美，但是Safari不支持小于1px的boxshadow，所以完全没显示出来了。

3 link标签和import标签的区别

一：建议使用link，慎用@import
二：区别

从属关系
1.1 link：link是HTML提供的标签，不仅可以加载CSS，还可以定义rel等属性
1.2 @import：@import是css提供的语法，只有导入样式表的作用
加载顺序
2.1 link：link在页面加载时CSS同时被加载
2.2 @import：引入的CSS要等页面加载完毕后再加载
兼容性问题
3.1 link是HTML提供的语法，不存在兼容性问题
3.2 @import是css2.1提供的语法，ie5以上才兼容
DOM可控性
js控制DOM时，可以通过插入link标签来改变样式，不能通过@import改变
权重问题（有争议）
link标签引入的样式权重大于@import标签

4 transition和animation的区别

（1）.animation：具有"动画"和"动画片"的意思，名副其实此属性的确可以定义动画效果。

（2）.transition：具有"过渡"的意思，规定属性从一个值过渡的另一个值，虽然也具有动画效果，但是和真正的动画效果效果比太逊色了，因为它只有初始和结束两个状态，所以"过渡"是对其更为恰当的描述。

一.动画状态的区别：

animation动画可以通过@keyframes属性对动画进行更为精细的控制，设置多个状态。

但是transition属性则只有两个状态，起始状态与结束状态。

二.子属性的数量不同：

两个属性都是复合属性，包含有若干个子属性，但是数目不相同。

当然子属性数量不同会对效果有影响，很容易区分，本文不做更多介绍。

三.触发时机不同：

两个属性的触发时机有很大的不同，animation好比是一个自执行函数，只要定义好，立马生效触发动画。

transition则像是一个事件处理函数（事件监听器），只有它监听的属性值发生改变，动画效果才会生效。

5 Flex布局

弹性布局，用来为盒装模型提供最大的灵活性。

任何一个容器都可以指定为Flex布局：

display:flex;

行内元素也可以使用Flex布局：

display:inline-flex;

webkit内核的浏览器，必须加上-webkit前缀：

display:-webkit-flex;
display:flex;

容器的属性：

flex-direction 决定主轴的方向
flex-wrap 项目在横向的排列方式
flex-flow 是flex-direction属性和flex-wrap属性的简写形式
justify-content 项目在主轴上的对齐方式
align-items 项目在交叉轴上如何对齐
align-content 定义了多根轴线的对齐方式

flex-direction:row | row-reverse |  column | column-reverse; 
row（默认值）：主轴为水平方向，起点在左端
row-reverse:主轴为水平方向，起点在右端
column:主轴为垂直方向，起点在上沿
column-reverse:主轴为垂直方向，起点在下沿

flex-wrap: nowrap | wrap | wrap-reverse;
nowrap(默认值):不换行
wrap:换行，第一行在上方
wrap-reverse:换行，在第一行的下方

flex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认 row nowrap。
flex-flow:<flex-direction> || <flex-wrap>;

justify-content:flex-start | flex-end | center | space-between |space-around;
flex-start（默认值）：左对齐
flex-end：右对齐
center：居中
space-between:两端对齐，项目之间的间隔都相等
space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。

align-items:flex-start | flex-end | center |baseline | stretch;
flex-start：交叉轴的起点对齐
flex-end:交叉轴的终点对齐
center：交叉轴的中点对齐
baseline：项目的第一行文字的基线对齐。
stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。

align-content:flex-start | flex-end | center | spance-between | space-around |stretch;
flex-start：与交叉轴的起点对齐。
flex-end：与交叉轴的终点对齐。
center：与交叉轴的中点对齐。
space-between：与交叉轴两端对齐，轴线之间的间隔平均分布。
space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。
stretch（默认值）：轴线占满整个交叉轴。

6 BFC

6.1 定义

块格式化上下文（Block Formatting Context，BFC） 是Web页面的可视化CSS渲染的一部分，是块盒子的布局过程发生的区域，也是浮动元素与其他元素交互的区域。

它是一个独立的渲染区域，只有Block-level box参与，它规定了内部的Block-level Box如何布局，并且与这个区域外部毫不相干。

6.2 BFC的生成

下列方式会创建块格式化上下文：

根元素(<html>)
浮动元素（元素的 float 不是 none）
绝对定位元素（元素的 position 为 absolute 或 fixed）
行内块元素（元素的 display 为 inline-block）
表格单元格（元素的 display为 table-cell，HTML表格单元格默认为该值）
表格标题（元素的 display 为 table-caption，HTML表格标题默认为该值）
匿名表格单元格元素（元素的 display为 table、table-row、 table-row-group、table-header-group、table-footer-group（分别是HTML table、row、tbody、thead、tfoot的默认属性）或 inline-table）
overflow 值不为 visible 的块元素
display 值为 flow-root 的元素
contain 值为 layout、content或 strict 的元素
弹性元素（display为 flex 或 inline-flex元素的直接子元素）
网格元素（display为 grid 或 inline-grid 元素的直接子元素）
多列容器（元素的 column-count 或 column-width 不为 auto，包括 column-count 为 1）
column-span 为 all 的元素始终会创建一个新的BFC，即使该元素没有包裹在一个多列容器中（标准变更，Chrome bug）。

6.3 BFC的约束规则

内部的Box会在垂直方向上一个接一个的放置
垂直方向上的距离由margin决定。（完整的说法是：属于同一个BFC的两个相邻Box的margin会发生重叠（塌陷），与方向无关。）
每个元素的左外边距与包含块的左边界相接触（从左向右），即使浮动元素也是如此。（这说明BFC中子元素不会超出他的包含块，而position为absolute的元素可以超出他的包含块边界）
BFC的区域不会与float的元素区域重叠
计算BFC的高度时，浮动子元素也参与计算
BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面元素，反之亦然

看到以上的几条约束，想想我们学习css时的几条规则

Block元素会扩展到与父元素同宽，所以block元素会垂直排列
垂直方向上的两个相邻DIV的margin会重叠，而水平方向不会(此规则并不完全正确)
浮动元素会尽量接近往左上方（或右上方）
为父元素设置overflow：hidden或浮动父元素，则会包含浮动元素

6.4 BFC在布局中的应用

1. 防止margin重叠（塌陷）

两个p之间的距离为100px，发送了margin重叠（塌陷），以最大的为准，如果第一个P的margin为80的话，两个P之间的距离还是100，以最大的为准。

根据BFC布局规则第二条：

Box垂直方向的距离由margin决定。属于同一个BFC(上例中是body根元素的BFC)的两个相邻Box的margin会发生重叠

我们可以在p外面包裹一层容器，并触发该容器生成一个新BFC。那么两个P便不属于同一个BFC，就不会发生margin重叠了。

<style>
    .wrap {overflow: hidden;// 新的BFC}
    p {
        color: #f55;
        background: #fcc;
        width: 200px;
        line-height: 100px;
        text-align:center;
        margin: 100px;
    }
</style>
<body>
    <p>Haha</p>
    <div class="wrap">
        <p>Hehe</p>
    </div>
</body>

2. 清除内部浮动

根据BFC布局规则第六条：计算BFC的高度时，浮动元素也参与计算。

为达到清除内部浮动，我们可以触发par生成BFC，那么par在计算高度时，par内部的浮动元素child也会参与计算。

<style>
    .par {
        border: 5px solid #fcc;
        width: 300px;
        overflow:hidden;
    }
    .child {
        border: 5px solid #f66;
        width:100px;
        height: 100px;
        float: left;
    }
</style>
<body>
    <div class="par">
        <div class="child"></div>
        <div class="child"></div>
    </div>
</body>

3.自适应多栏布局

3.1 自适应两栏布局

据BFC布局规则第3条：每个元素的margin box的左边，与包含块border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。因此，虽然存在浮动的元素aslide，但main的左边依然会与包含块的左边相接触。

根据BFC布局规则第4条：BFC的区域不会与float box重叠。

我们可以通过通过触发main生成BFC，来实现自适应两栏布局。当触发main生成BFC后，这个新的BFC不会与浮动的aside重叠。因此会根据包含块的宽度，和aside的宽度，自动变窄。

<style>
    body {
        width: 300px;
        position: relative;
    }
    .aside {
        width: 100px;
        height: 150px;
        float: left;
        background: #f66;
    }
    .main {
        height: 200px;
        background: #fcc;
        overflow:hidden;
    }
</style>
<body>
    <div class="aside"></div>
    <div class="main"></div>
</body>

3.2 布局的特点在于左右两栏宽度固定，中间栏可以根据浏览器宽度自适应。

<style>
#left{
        float: left;
        width:100px;
        height: 100px;
        background-color: #00A5FF;
    }
    #right{
        float: right;
        width:100px;
        height:100px;
        background-color: #0000FF;
    }
    #middle{
        overflow: hidden;
        width:auto;
        height:150px;
        background-color: red;
    }
      </style>

<div id="left"></div>
<div id="right"></div>
<div id="middle"></div>

7 水平垂直居中方法

7.1 利用flex

将父元素设置为display:flex，并且设置align-items:center;justify-content:center;

<style>
    .out{
        width: 400px;
        height: 400px;
        background-color: aquamarine;
        display: flex;
        align-items: center;/*垂直居中*/
        justify-content: center;/*水平居中*/
    }
    .in{
        width: 100px;
        height: 100px;
        background-color: chartreuse;
    }
    </style>
</head>
<body>
    <!-- 方法一：弹性布局实现 -->
    <div class="out">
        <div class="in"></div>
    </div>
</body>

7.2 margin负值法

/*2.设置父元素相对定位，子元素position:absolute;top:50%;同时margin-top值为-(子元素高度的一半)*/
    .out{
        width: 400px;
        height: 400px;
        background-color: aquamarine;
        position: relative;
    }
    .in{
        width: 100px;
        height: 100px;
        background-color: chartreuse;
        position: absolute;
        top: 50%;
        left: 50%;
        margin-top: -50px;
        margin-left:  -50px;
    }


/*设置父元素为相对定位，子元素为绝对定位，同时设置子元素的top,bottom,left,right值为0，
最后设置margin:auto;这能实现块元素的垂直+水平居中*/
.out{
        width: 400px;
        height: 400px;
        background-color: aquamarine;
        position: relative;
    }
    .in{
        width: 100px;
        height: 100px;
        background-color: chartreuse;
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        margin: auto;
        }

7.3 translate

/*3.利用定位，子元素用transform:translateY(-50%)和margin-top:-50px*/ 
.out{
        width: 400px;
        height: 400px;
        background-color: rgb(141, 184, 169);
        position: relative;
    }
    .in{
        width: 100px;
        height: 100px;
        background-color: chartreuse;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%);
    }

7.4 table-cell

/*4.table-cell */
    .out{
        width: 400px;
        height: 400px;
        background-color: rgb(141, 184, 169);
        display: table-cell;
        vertical-align: middle;
        text-align: center
    }
    .in{
        width: 100px;
        height: 100px;
        background-color: chartreuse;
       vertical-align: middle;
       margin: auto;
    }

line-height为父元素的高实现垂直居中，但是，这种方法只适用于子元素为单行文本的情况。
还有一个vertical-align: middle;这个适用于行内元素的垂直居中，块元素不可以。

8 关于js动画和css3动画的差异

CSS动画

优点：

(1)浏览器可以对动画进行优化。

1、浏览器使用与 requestAnimationFrame 类似的机制，requestAnimationFrame比起setTimeout，setInterval设置动画的优势主要是:1)requestAnimationFrame 会把每一帧中的所有DOM操作集中起来，在一次重绘或回流中就完成,并且重绘或回流的时间间隔紧紧跟随浏览器的刷新频率,一般来说,这个频率为每秒60帧。2)在隐藏或不可见的元素中requestAnimationFrame不会进行重绘或回流，这当然就意味着更少的的cpu，gpu和内存使用量。

2、强制使用硬件加速（通过 GPU 来提高动画性能）

(2)代码相对简单,性能调优方向固定

(3)对于帧速表现不好的低版本浏览器，CSS3可以做到自然降级，而JS则需要撰写额外代码

缺点：

　 1、运行过程控制较弱,无法附加事件绑定回调函数。CSS动画只能暂停,不能在动画中寻找一个特定的时间点，不能在半路反转动画，不能变换时间尺度，不能在特定的位置添加回调函数或是绑定回放事件,无进度报告

　 2、代码冗长。想用 CSS 实现稍微复杂一点动画,最后CSS代码都会变得非常笨重。

JS动画

优点：

(1)JavaScript动画控制能力很强, 可以在动画播放过程中对动画进行控制：开始、暂停、回放、终止、取消都是可以做到的。

(2)动画效果比css3动画丰富,有些动画效果，比如曲线运动,冲击闪烁,视差滚动效果，只有JavaScript动画才能完成

(3)CSS3有兼容性问题，而JS大多时候没有兼容性问题

缺点：

(1)JavaScript在浏览器的主线程中运行，而主线程中还有其它需要运行的JavaScript脚本、样式计算、布局、绘制任务等,对其干扰导致线程可能出现阻塞，从而造成丢帧的情况。

(2)代码的复杂度高于CSS动画

总结：如果动画只是简单的状态切换，不需要中间过程控制，在这种情况下，css动画是优选方案。它可以让你将动画逻辑放在样式文件里面，而不会让你的页面充斥 Javascript 库。然而如果你在设计很复杂的富客户端界面或者在开发一个有着复杂UI状态的 APP。那么你应该使用js动画，这样你的动画可以保持高效，并且你的工作流也更可控。所以，在实现一些小的交互动效的时候，就多考虑考虑CSS动画。对于一些复杂控制的动画，使用javascript比较可靠。

9 块元素和行元素

HTML中的元素可分为两种类型：块级元素和行级元素。这些元素的类型是通过文档类型定义（DTD）来指明。块级元素：显示在一块内，会自动换行，元素会从上到下垂直排列，各自占一行，如p,ul,form,div等标签元素。行内元素：元素在一行内水平排列，高度由元素的内容决定，height属性不起作用，如span,input等元素。

9.1 块级元素

每个块级元素默认占一行高度，一行内添加一个块级元素后无法一般无法添加其他元素（float浮动后除外）。两个块级元素连续编辑时，会在页面自动换行显示。块级元素一般可嵌套块级元素或行内元素；DIV 是最常用的块级元素，元素样式的display:block都是块级元素。它们总是以一个块的形式表现出来，并且跟同级的兄弟块依次竖直排列，左右撑满。

block（块）元素的特点:

①、总是在新行上开始；
②、高度，行高以及外边距和内边距都可控制；
③、宽度缺省是它的容器的100%，除非设定一个宽度。
④、它可以容纳内联元素和其他块元素

常见的块状元素

address – 地址
blockquote – 块引用
center – 举中对齐块
dir – 目录列表
div – 常用块级容易，也是CSS layout的主要标签
dl – 定义列表
fieldset – form控制组
form – 交互表单
h1 – 大标题
h2 – 副标题
h3 – 3级标题
h4 – 4级标题
h5 – 5级标题
h6 – 6级标题
hr – 水平分隔线
isindex – input prompt
menu – 菜单列表
noframes – frames可选内容，（对于不支持frame的浏览器显示此区块内容
noscript – 可选脚本内容（对于不支持script的浏览器显示此内容）
ol – 有序表单
p – 段落
pre – 格式化文本
table – 表格
ul – 无序列表

9.2 行内元素

也叫内联元素、内嵌元素等；行内元素一般都是基于语义级(semantic)的基本元素，只能容纳文本或其他内联元素，常见内联元素 “a”。比如 SPAN 元素，IFRAME元素和元素样式的display : inline的都是行内元素。例如文字这类元素，各个字母之间横向排列，到最右端自动折行。

inline元素的特点

①、和其他元素都在一行上；
②、高，行高及外边距和内边距不可改变；
③、宽度就是它的文字或图片的宽度，不可改变
④、内联元素只能容纳文本或者其他内联元素
对行内元素，需要注意如下：

设置宽度width 无效。
设置高度height 无效，可以通过line-height来设置。
设置margin 只有左右margin有效，上下无效。
设置padding只有左右padding有效，上下则无效。注意元素范围是增大了，但是对元素周围的内容是没影响的。

常见的内联元素

a – 锚点
abbr – 缩写
acronym – 首字
b – 粗体(不推荐)
bdo – bidi override
big – 大字体
br – 换行
cite – 引用
code – 计算机代码(在引用源码的时候需要)
dfn – 定义字段
em – 强调
font – 字体设定(不推荐)
i – 斜体
img – 图片
input – 输入框
kbd – 定义键盘文本
label – 表格标签
q – 短引用
s – 中划线(不推荐)
samp – 定义范例计算机代码
select – 项目选择
small – 小字体文本
span – 常用内联容器，定义文本内区块
strike – 中划线
strong – 粗体强调
sub – 下标
sup – 上标
textarea – 多行文本输入框
tt – 电传文本
u – 下划线

行内元素与块级元素有什么不同？

区别一：
块级：块级元素会独占一行，默认情况下宽度自动填满其父元素宽度
行内：行内元素不会独占一行，相邻的行内元素会排在同一行。其宽度随内容的变化而变化。

区别二：
块级：块级元素可以设置宽高
行内：行内元素不可以设置宽高

区别三：
块级：块级元素可以设置margin，padding
行内：行内元素水平方向的margin-left; margin-right; padding-left; padding-right;可以生效。但是竖直方向的margin-bottom; margin-top; padding-top; padding-bottom;却不能生效。

区别四：
块级：display:block;
行内：display:inline;
可以通过修改display属性来切换块级元素和行内元素

可变元素

可变元素为根据上下文语境决定该元素为块元素或者内联元素。

applet - java applet
button - 按钮
del - 删除文本
iframe - inline frame
ins - 插入的文本
map - 图片区块(map)
object - object对象
script - 客户端脚本

just so so

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS

1 CSS盒模型标准盒模型和IE盒模型的区别：在标准盒子模型中，width 和 height 指的是内容区域的宽度和高度。增加内边距、边框和外边距不会影响内容区域的尺寸，但是会增加元素框的总尺寸。 IE盒子模型中，width 和 height 指的是内容区域+border+padding的宽度和高度。 CSS3中引入了box-sizing属性，box-sizin...
复制链接

扫一扫

专栏目录