前端技术的尽头——CSS(哈哈)(未排版,自用)

1.css的格式
选择器{声明}
2.选择器
标签选择器p{ }
类选择器.XXX{ } (一个标签可以有多个属性,用空格分开,<p calss=”iss sd”></p>)
id选择器#XXX{} (id值每个值都不一样,只能调用一次)
通配符选择器*{ } (选取所有元素)
3.css的字体属性
font-family=“ ”
4.字体大小属性
font-size=”16px”
5.字体粗细
font-weight : normal
font-weight : blodl(加粗)
6.字体样式
font-style :normal(标准)
font-style : italic(斜体)
7.font复合属性
font: font-style font-weight font-size font-family;
div{
font:italic 700 16px ‘Microsoft yahei’
}
8.文本颜色color
9.文本对齐text-align
text-align:left;(默认)
text-align:right;
text-align:center;
10.文本修饰text-decoration(可以给文字加上划线,下划线,删除线)
text-decoration :none;(默认)
text-decoration :underline;
text-decoration :overline;
11.文本缩进text-indent (段落首行缩进)
text-indent:20px;
或者text-indent:2em;(em是相对单位,对照一个文字的大小来说的)
12.行间距line-height
行间距=上间距+文字+下边距
13.css引入方式
外部样式表<link rel =”stylesheet” href=”文件路径”>
内部样式表(用style标签夹住)
行内样式表(不常用)
14.css后代选择器
两个元素放在一起,用空格分隔,选用后代元素
ol li { }
.cla li{ }
15.子元素选择器(选择某一级元素最近的子元素,即亲儿子)
.cla >a { }
16.并集选择器(就是多选)
div,p { }
17.链接伪类选择器(注意,要按照LVHA的顺序声明)
a:link { } 选择所有未访问过的链接
a:visited { } 选择所有访问过的链接
a:hover { } 选择鼠标指针位于其上的链接
a:active{ } 选择鼠标按下未弹起的链接
18:focus伪类选择器(用于选取获得焦点的表单元素,一般针对input表单元素)
input:focus { }

19.块元素,行内元素
块元素占一行,高,宽,外边距,内边距可控,宽度默认为容器的100%,是一个容器,可以放行内或块元素,例如div,p,h1,ul,ol,li
注意:文字类的元素内不可以放块元素,如p里面不能放div
行内元素在一行可以有多个,如span,a,
注意:宽,高直接设置无效
默认宽度就是内容本身的宽度
行内元素只能容文本或者其他元素
特殊情况下a标签里面可以放块级元素
20.行内块元素
<img/><input/><td>兼有块元素和行内元素的特点
一行可以显示多个(行内元素的特点)
默认宽度就是内容的宽度(行内元素的特点)
高度,行高,内外边距都可以控制(块级元素的特点)
21.显示模式转换
display:block;转为块元素(经常用,需要设置宽,高)
display:inline;转为行内元素
display:inline-block;转为行内块元素
22.单行文字垂直居中
line-height=”盒子高度”
23.背景颜色
background-color:transparent;(默认透明transparent)
24.背景图片
background-image:url();
25.背景图片平铺
background-repeat:repeat;(平铺)
background-repeat:no-repeat;(默认不平铺)
26.背景图片位置
background-position: x y;(x,y是坐标轴,x是横轴,y是纵轴)
26.1参数是方位名词
background-position:left top;(与顺序无关,等价于top,left)
(如果只显示一个值,默认后者居中对齐)
26.2参数是精确单位(第一个一定是X坐标,第二个一定是Y坐标)
background-position: 20px 50px;
27.背景图片固定
background-attachment:scroll(滚动)
background-attachment:fixed(不滚动)
28.css特性
28.1层叠性(就近原则,同一个元素div拥有样式冲突,冲突的样式就近,不冲突的就算了)
28.2继承性(div夹着p标签,div被设置了样式,p也会应用)
28.3优先级(选择器不同,根据选择器权重执行,行内样式style>id选择器>类选择器,伪类选择器>元素选择器>继承)
29.盒子模型
30.边框的复合写法(没有顺序要求)
border:1px solid red;
31.边框会影响盒子的宽度(算进去)
32.盒子模型内边距padding(边框和内容之间)
padding-left
padding-right
padding-top
33.padding会改变盒子大小
如果div指定了固定的高宽,添加内边距会使盒子撑大
如果div没有指定,则不会撑大盒子
34.margin外边距(盒子与盒子之间的距离)
外边距可以让盒子居中的前提:盒子必须指定宽度,左右外边距设置为auto
父元素和子元素同时设定了上外边距,此时,父元素会塌陷至上外边距值较大的那个值
35.清除内外边距

*{
 Padding:0;
 margin:0;

}
36.圆角边框(让盒子边框的四个角变成圆)
border-radius : XXpx ;
37.盒子阴影跳了!!!
38.浮动(也是写在选择器里面的属性,很重要)
css三种布局方式:普通流(标准流),浮动,定位
普通流:块级元素会占一行,从上到下依次排列
行内元素会从左到右排
float三个取值:none left right
浮动的特性
1.脱离标准流(脱标),位置不再保留,可以让别人占有
2.如果多个盒子设置了浮动,他们会按照属性值一行内显示且顶端对齐排列
3.具有行内块元素特性
浮动元素经常和标准流父级搭配使用(先用标准的父元素排列上下位置,之后子元素采用浮动排列左右位置)
盒子的浮动只会影响后面盒子的标准流,不会影响到前面的标准流(因为前面的盒子独占一行)
为什么要清除浮动?(前提是父级盒子没有设置高度)
子盒子浮动起来,影响了父盒子!!!!!!!!!!!!!!!!!!!!!!!
由于父级盒子很多情况下不能有固定高度,但是子盒子浮动起来又不占有位置,然后父级盒子高为0时,就会影响下面的标准流盒子
清除浮动选择器{clear:属性值; } left right both
清除浮动后,父级盒子就会有了高度,就不会影响下面的标准流了
清除浮动的本质是清除浮动元素脱离标准流造成的影响
额外标签法:在最后一个浮动盒子后面添加块级元素
<div class=”XXX”></div>
<style>
.XXX {
Clear:both;
}
</style>
父级添加overflow属性法,属性值为 hiddenscroll auto

39.定位
某个元素在盒子里可以随意摆动,甚至盖到别的盒子上
定位=定位模式(元素在文档中的定位方式)+边偏移(决定了该元素的最终位置)
1静态定位static
2相对定位relative(相对于移动之前的位置来说的)反着来
而且移动后,原来位置会继续保留,不脱标,后面的盒子会以标准流方式对待他
3绝对定位absolute
绝对定位是元素在移动位置的时候,是相对于祖先元素来说的
3.1如果没有祖先元素,或者祖先元素没有定位,会以浏览器为准定位
3.2如果祖先元素有定位(相对,绝对,固定均可),则以最近一级祖先元素为参考移动位置
3.3绝对定位不再占有原来的位置(脱标)
“子绝父相”
!!!!!!!!!!!!!!
子级元素使用绝对定位,不会占有位置,父级需要占有位置,所以必须相对定位
!!!!!!!!!!
4.固定定位(也是脱标的)
页面滚动时,元素位置不会改变
以浏览器可视窗口为准,不随滚动条滚动
和父元素没有任何关系
Tips:固定在版心右侧位置
5定位叠放次序z-index(控制盒子前后次序)

元素的显示与隐藏
1.display显示与隐藏元素
display:none; (隐藏对象且不再占有原来的位置)
display:block;(不仅是转换为块级元素,还表示不再隐藏)
2.visbility可见性
hidden隐藏对象且占有原来的位置
3.overflow溢出
overflow:hidden; (溢出的隐藏起来)
overflow:scroll;(溢出部分显示滚动条,不溢出也显示滚动条)
overflow:auto;(溢出时候才显示滚动条,不溢出不显示滚动条)

作者:thiefMooner原文地址:https://segmentfault.com/a/1190000043381377

%s 个评论

要回复文章请先登录注册