CSS总结
2019-04-30 本文已影响0人
Claire_cc
- p上下有间距，title加粗，div和span无样式
- div：换行，块元素eg：h1,p
span：不换行，内联元素eg：b,font,img,input,textarea,a - 查看网页前端代码：F12 elements 左上箭头查看某块代码
- 引入css：
（1）在<head>里面<style type="text/css"></style>
（2）<link rel="stylesheet" type="text/css" href="文件路径">
（3）直接写在标签里面<p style="color:red;"> - 选择器：
（1）标签 div
（2）类名 .one
（3）id #slider
（4）属性选择器input[type='text']
（5）用，隔开选择多个（群组选择器）div,span,.one{ }
（6）a:link{} a:visited{} a:hover{} a:active{} 伪类选择器（img同）
（7）div：first-child means 是div，也是父类的第一个孩子
（8）*{ }全局选择器
优先级：id>类名>标签 - css可以控制的样式
- 背景
background-image:url()
background-repeat:no-repeat/repeat-x/repeat-y
background-position:top/bottom/center/left-top
background-attachment:fixed/enroll
background：。。。 - 文本
text-indent:2em（两个字体大小，默认1em是16px）
text-align:justify/center
text-decoration:line-through/overline/underline
color:
wording-spacing:
letter-spacing:
line-height:
font-size:
font-family："黑体"
font-style：italic/oblique（倾斜）
font-weight：粗细
font：。。。。。 - 列表
list-style-type:square/none/decimal（有序列表）
list-style-image:
list-style-position:inside/outside 多行之后是否和图标对齐
list-style：。。。
-
盒模型
- margin和padding
计算盒子宽度：width+(border+margin+padding)*2
<body>自带margin和padding
width可以设成百分比，height不行
padding：上右下左
margin:0 auto 相对父元素左右居中
当上下或者父子盒子某边重合时margin按照较大的值显示 - border
border设solid才显示，默认是hidden
可设置样式：border-top-style/border-color/width/style/radius
- 定位
浮动：元素只能左右移动而不能上下移动，一个浮动元素会尽量向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。浮动元素之后的元素将围绕它，取消方式：浮动元素后面设一个div class="clear" css里面设.clear{clear:both}。浮动元素之前的元素将不会受到影响。
（1）position:static
（2）position:relative
（3）position:absolute
（4）position:fixed
