前端之CSS重点知识

字体属性

字体大小:font_size

<-! rgba调整透明度-></-!>
<div style="background: rgba(125,125,111,0.5)">aaaaa</div>

文字属性

text-align

元素中的文本居中对齐:text-align:center;

元素中的文本右对齐:text-align:right;

元素中的文本左对齐:text-align:left;

元素中的文本两端对齐:text-align:justify;

text-decoration

默认标准文本(a标签去除下划线):text-decoration:none

定义文本下的一条线:text-decoration:underline

定义文本上的一条线:text-decoration:overline

定义穿过文本下的一条线 :text-decoration:line_through

首行缩进:text-indent:32px

背景属性

background-color: red; /*背景图片*/ background-image: url('1.jpg');
background-repeat:repeat(默认):背景图片平铺排满整个网页
background-repeat:no-repeat:背景图片不平铺

边框

边框宽度:border-width:1px

边框样式:border-style:solid (所有样式:none,dotted,dashed,solid) -> 简写: border: 2px solid red;

边框颜色:border-color:red

圆形border-radius:50%;

display属性

意义
display:"none" HTML文档中元素存在,但是在浏览器中不显示。一般用于配合JavaScript代码使用。
display:"block" 默认占满整个页面宽度,如果设置了指定宽度,则会用margin填充剩下的部分。
display:"inline" 按行内元素显示,此时再设置元素的width、height、margin-top、margin-bottom和float属性都不会有什么影响。
display:"inline-block" 使元素同时具有行内元素和块级元素的特点。

display:"none"与visibility:hidden的区别:

visibility:hidden: 可以隐藏某个元素,但隐藏的元素仍需占用与未隐藏之前一样的空间。也就是说,该元素虽然被隐藏了,但仍然会影响布局。

display:none: 可以隐藏某个元素,且隐藏的元素不会占用任何空间。也就是说,该元素不但被隐藏了,而且该元素原本占用的空间也会从页面布局中消失

CSS盒子模型

  • margin: 用于控制元素与元素之间的距离;margin的最基本用途就是控制元素周围空间的间隔,从视觉角度上达到相互隔开的目的。
  • padding: 用于控制内容与边框之间的距离;
  • Border(边框): 围绕在内边距和内容外的边框。
  • Content(内容): 盒子的内容,显示文本和图像。

margin外边距

margin:5px 10px 15px 20px(顺序分别对应 上,右,下,左)

常见居中: margin: 0 auto;

padding内填充

padding: 5px 10px 15px 20px; (顺序同margin)

float

向左浮动 -> float:left ;

向右浮动 :->float:right ;

默认值,不浮动 :->float:none ;

clear

clear属性规定元素的哪一侧不允许其他浮动元素。

描述
left 在左侧不允许浮动元素。
right 在右侧不允许浮动元素。
both 在左右两侧均不允许浮动元素。
none 默认值。允许浮动元素出现在两侧。
inherit 规定应该从父元素继承 clear 属性的值。

注意:clear属性只会对自身起作用,而不会影响其他元素。

伪元素清除法(使用较多):

.clearfix:after { content: ""; display: block; clear: both; }

overflow溢出属性

描述
visible 默认值。内容不会被修剪,会呈现在元素框之外。
hidden 内容会被修剪,并且其余内容是不可见的。
scroll 内容会被修剪,但是浏览器会显示滚动条以便查看其余的内容。
auto 如果内容被修剪,则浏览器会显示滚动条以便查看其余的内容。
inherit 规定应该从父元素继承 overflow 属性的值。

定位(position)

static

static 默认值,无定位,不能当作绝对定位的参照物,并且设置标签对象的left、top等值是不起作用的的

relative(相对定位)

相对定位是相对于该元素在文档流中的原始位置,即以自己原始位置为参照物。

absolute(绝对定位)

置为绝对定位的元素框从文档流完全删除,并相对于最近的已定位祖先元素定位

重点: 如果父级设置了position属性,例如position:relative;,那么子元素就会以父级的左上角为原始点进行定位。这样能很好的解决自适应网站的标签偏离问题,即父级为自适应的,那我子元素就设置position:absolute;父元素设置position:relative;,然后Top、Right、Bottom、Left用百分比宽度表示。

fixed(固定)

在理论上,被设置为fixed的元素会被定位于浏览器窗口的一个指定坐标,不论窗口是否滚动,它都会固定在这个位置。

z-index

  1. z-index 值表示谁压着谁,数值大的压盖住数值小的,
  2. 只有定位了的元素,才能有z-index,也就是说,不管相对定位,绝对定位,固定定位,都可以使用z-index,而浮动元素不能使用z-index
  3. z-index值没有单位,就是一个正整数,默认的z-index值为0如果大家都没有z-index值,或者z-index值一样,那么谁写在HTML后面,谁在上面压着别人,定位了元素,永远压住没有定位的元素。
  4. 从父现象:父亲怂了,儿子再牛逼也没用

opacity

用来定义透明效果。取值范围是0~1,0是完全透明,1是完全不透明。

posted @ 2019-10-12 19:50  后排男生  阅读(154)  评论(0编辑  收藏  举报