CSS
文章平均质量分 67
weixin_41387874
这个作者很懒,什么都没留下…
展开
-
CSS基础——常用属性的百分号如何计算
CSS中常用属性设置百分号是如何计算的百分号的作用我们使用百分号作为一些CSS属性的值可以实现自适应的效果。但是为了正确的使用百分号,我们需要明确不同CSS属性的百分号是相对于哪个值计算的。不能使用百分号作为属性值的属性border-width属性不能使用百分号作为属性值。可以使用百分号的属性line-heightline-height的百分号值是相对于当前元素的font-size值计算的,如当前元素font-size: 12px;,那么line-height:原创 2022-02-17 15:04:09 · 477 阅读 · 0 评论 -
CSS3基础 -- 弹性盒子模型
弹性盒子模型弹性盒子作用使用弹性盒子,我们可以轻松创建自适应浏览器窗口的流动布局和自适应字体大小的弹性布局。弹性盒子特点当我们对一个元素定义它的display属性是flex或inline-flex时,这个元素就会变成一个弹性盒子,会具有弹性盒子特点。当子元素宽度之和小于父元素宽度时,所有子元素最终的宽度就是定义的宽度。当子元素宽度之和大于父元素宽度时,子元素会按照比例来划分。弹性布局的基本概念flex容器和flex items采用弹性布局的元素,称为flex容器。flex容器.原创 2021-09-05 21:51:40 · 257 阅读 · 0 评论 -
CSS3基础 -- 多列布局
多列布局多列布局作用多列布局是CSS3实现的用来解决多列布局的布局方式。多列布局常用的5个属性column-countcolumn-count用来指定多列布局的列数。column-count属性的2种属性值auto(默认值)列数由column-width属性决定。n(正整数)自动划分为n列。column-widthcolumn-width属性用来指定多列布局中每一列的宽度。column-width属性的2种属性值auto(默认值原创 2021-09-04 19:18:41 · 171 阅读 · 0 评论 -
CSS3新增选择器
CSS3新增选择器CSS 2.1中的5种选择器id选择器class选择器元素选择器群组选择器层次选择器后代选择器属性选择器属性选择器指的是通过“元素的属性”来选择元素的一种方式。元素的属性就是id、type、value等。E[attr^ = “xxx”]选中元素E中,属性attr以xxx开头的。E[attr$ = “xxx”]选中元素E中,属性attr以xxx结尾的。E[attr* = “xxx”]选中元素E中,属性at原创 2021-09-04 17:48:40 · 110 阅读 · 0 评论 -
CSS基础 -- 包含块、层叠上下文、BFC和IFC
CSS重要概念CSS有3个重要的概念包含块(containing block)BFC和IFC层叠上下文包含块(containing block)如果有2个div,其中一个是父元素,另外一个是子元素,那么父元素会决定子元素的大小和定位。包含块简单的说,就是可以决定一个元素大小和定位的元素。一般情况下,一个元素的包含块是离它最近的祖先元素的content区。当一个元素设置为position: absolute;时,这个元素的包含块是离它最近的设置了position: relative;.原创 2021-08-29 02:28:11 · 169 阅读 · 0 评论 -
CSS技巧 -- 水平居中和垂直居中
CSS技巧水平居中文本的水平居中单行文本的水平居中对元素设置text-align: center;,text-align对文本、inline元素、inline-block元素有效,对block元素无效。元素的水平居中块元素我们可以对块元素设置width,然后为块元素设置margin-left: auto; margin-right: auto;。等价写法是margin: 0 auto;注意必须对块元素设置width,这个方法才有效,如果不设置width,块元素会默认.原创 2021-08-28 21:39:48 · 81 阅读 · 0 评论 -
CSS基础 -- 使用CSS实现常见图形
CSS图形三角形我们知道,CSS中元素都是由盒子组成的,当盒子的border相交时,浏览器会在这个相交处绘制一条接合线。CSS实现三角形就利用了这个接合线,把一个元素的width和height设置为0,然后设置border-width为较大的值,然后把任选三条或两条边框的颜色设置为transparent。实际上是隐藏了部分border来形成三角形效果。带边框的三角形我们一般使用2个三角形来实现带边框的三角形。上层三角形相对于下层三角形定位布局。下层三角形设置positio.原创 2021-08-28 18:54:01 · 83 阅读 · 0 评论 -
CSS定位布局
写在之前固定布局优势:可以精准定位页面中的任何元素。劣势:当屏幕大小不确定时会出现一些问题。浮动布局优势:定位灵活。劣势:不容易控制,当对两个元素同时设置float属性时,会出现问题,需要使用clear属性。定位布局position属性用于实现定位布局,position属性一共有4种属性值。属性作用fixed用于固定布局relative用于相对布局absolute用于绝对布局static用于静态布局,是默认值固定布局原创 2021-04-21 01:58:51 · 97 阅读 · 0 评论 -
CSS基础 -- display属性
display属性块元素和行内元素block元素块元素在浏览器显示中独占一行,并且排斥其他元素与其位于同一行。(显示效果上独占一行。)常见的6种块元素h1-h6pdivulolhr块元素可以容纳其他行内元素或块元素。块元素可以设置width属性和height属性。块元素可以定义4个方向上的margin。inline元素行内元素可以和其他元素同占一行。常见的4种行内元素strongemaspan行内元素可以包含其他.原创 2021-08-27 17:18:43 · 458 阅读 · 0 评论 -
CSS盒子模型
写在之前块元素:<h>标签、<p>标签、<hr>标签、标签、<ul>标签、<ol>标签。行内元素:<span>标签、<em>标签、<strong>标签等。只有块元素才能设置width属性和height属性。CSS盒子模型示意图CSS盒子模型CSS盒子模型认为每一个元素都可以看成一个盒子,每一个页面由很多个盒子组成,这些盒子之间会互相影响。盒子模型由四个属性构成,分别是:content(内容)原创 2021-04-20 20:00:37 · 64 阅读 · 0 评论