笔记-CSS

最新推荐文章于 2023-12-27 11:36:04 发布

liandawubian

最新推荐文章于 2023-12-27 11:36:04 发布

阅读量96

点赞数

文章标签： CSS

不是原创哦，笔记是照着关注的微信公众号Web前端之巅记下来的，大家去关注吧！她的博客地址是https://blog.csdn.net/lvonve/，非常感谢她！

CSS介绍

CSS全称为Cascading Style Sheets,层叠样式表。可以对网页的布局，颜色，背景，宽度，高度，字体进行控制，让页面更加美观。

选择器

标签选择器

列选择器

谁调用，谁生效
一个标签可以调用多个类选择器，多个标签可以调用同一个类选择器
命名规则
- 不能用数字开头
- 不能特殊符号开头，除_
- 不建议用汉字
- 不建议用属性值

id选择器

一个ID选择器在一个页面智能使用一次。
一个标签只能使用一次ID选择器。
一个标签可以同时使用类选择器和ID选择器。

通配符选择器*

所有的标签都是用此样式，不建议使用，会增加浏览器和服务器的负担。

标签分类

块元素

如div,h1-h6,p,ul,li等

独占一行
可以设置宽高
子元素宽度在没有定义的情况下和父元素同宽

行内元素

如span, a, strong,em,del,ins等

在一行上显示
不能直接设置宽高，需转成行内块
元素的宽高第内容撑开的宽高

行内块元素

在一行上显示，可以设置宽高

三者转换

display: inline; /*块元素转行内元素*/
display: block; /*行内元素转块元素*/
display: inline-block; /*块和行内元素转行内块元素，用的最多*/

CSS的三大特性

层叠性

当多个样式作用于一个标签是，发生样式冲突，呈现后面的样式。

继承性

文字的颜色，大小，字体，粗细，风格，行高可以继承。
特殊情况：

h系列不能继承文字的大小
a不能继承文字的颜色

优先级

默认样式<标签选择器(0)<类选择器(1)

常见的初始化代码

腾讯

 body,ol,ul,h1,h2,h3,h4,h5,h6,p,th,td,dl,dd,form,fieldset,legend,input,textarea,select{margin:0;padding:0} 
        body{font:12px"宋体","Arial Narrow",HELVETICA;background:#fff;-webkit-text-size-adjust:100%;} 
a{color:#2d374b;text-decoration:none} 
a:hover{color:#cd0200;text-decoration:underline} 
em{font-style:normal} 
li{list-style:none} 
img{border:0;vertical-align:middle} 
table{border-collapse:collapse;border-spacing:0} 
p{word-wrap:break-word}

新浪

body,ul,ol,li,p,h1,h2,h3,h4,h5,h6,form,fieldset,table,td,img,div{margin:0;padding:0;border:0;} 
body{background:#fff;color:#333;font-size:12px; margin-top:5px;font-family:"SimSun","宋体","Arial Narrow";}
ul,ol{list-style-type:none;} 
select,input,img,select{vertical-align:middle;} 
a{text-decoration:none;} 
a:link{color:#009;} 
a:visited{color:#800080;} 
a:hover,a:active,a:focus{color:#c00;text-decoration:underline;}

淘宝

body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt, dd, ul, ol, li, pre, form, fieldset, legend, button, input, textarea, th, td { margin:0; padding:0; } 
body, button, input, select, textarea { font:12px/1.5tahoma, arial, \5b8b\4f53; } 
h1, h2, h3, h4, h5, h6{ font-size:100%; } 
address, cite, dfn, em, var { font-style:normal; } 
code, kbd, pre, samp { font-family:couriernew, courier, monospace; } 
small{ font-size:12px; } 
ul, ol { list-style:none; } 
a { text-decoration:none; } 
a:hover { text-decoration:underline; } 
sup { vertical-align:text-top; } 
sub{ vertical-align:text-bottom; } 
legend { color:#000; } 
fieldset, img { border:0; }
button, input, select, textarea { font-size:100%; } 
table { border-collapse:collapse; border-spacing:0; }

定位

静态定位

position: static; /*文档流*/

绝对定位

position: absolute;

不占据原来的位置,拖标
位置从浏览器出发
父盒子没有使用定位，子盒子绝对定位，子盒子从浏览器出发
父盒子使用定位，子盒子绝对定位，从父盒子出发
行内元素绝对定位后，转为行内块

相对定位

position: relative;

从自身位置出发
不脱标，其他的元素不能占有其原来的位置
子绝父相，用的场景最多
行内元素相对定位不能转为行内块元素

固定定位

position: fixed;

不占据原来的位置，脱标
从浏览器出发
元素固定定位后，转化为行内块元素

定位的盒子居中

left: 50%;
margin-left: -(一般盒子宽度);

标签包含规范

div可以包含所有的标签
p不能包含div，h1等
h1可以包含p，div等标签
行内元素尽量包含行内元素，不要包含块元素

规避脱标流

尽量使用标准流
标准流解决不了使用浮动
浮动解决不了使用定位

图片和文字垂直居中对齐

vertical-align主要用在inline-block标签上，效果最好，默认是baseline

baseline: 默认。元素放置在父元素的基线上。
sub: 垂直对齐文本的下标。
super: 垂直对齐文本的上标
top: 把元素的顶端与行中最高元素的顶端对齐
text-top: 把元素的顶端与父元素字体的顶端对齐
middle: 把此元素放置在父元素的中部。
bottom: 把元素的顶端与行中最低的元素的顶端对齐。
text-bottom: 把元素的底端与父元素字体的底端对齐。
length:
%: 使用 “line-height” 属性的百分比值来排列此元素。允许使用负值。
inherit: 规定应该从父元素继承 vertical-align 属性的值。