首页 > 代码库 > css基础精华
css基础精华
css
手打不易，望君珍惜。
css固定格式
选择器{
属性：属性值；
｝
文字相关属性
font-syle:normal
italic
font-weight:bold;
boleder
lighter
font-size:px;
font-family:”微软雅黑”；
如果有英文，先把英文放在前面用逗号隔开。
注释 /* */
简写 italic bold px family
文本属性
text-decoration: underline
line-through
overline
none
text-algin: left
right
top
bottom
text-indent:em
颜色
rgb(225,225,225)后面可以放一个0 ，0到1 ，显示透明度。
选择器
标签选择器
p{
}
类选择器
.class1{
}
<div class="class1"></div>
只能使用数学英语单词下划线，不能以数字开头。
id选择器
top{
}
<div></div>
企业慎用
后代选择器
ul li｛
｝
<li></li>
<ul>
<li></li>
<li></li>
</ul>
<li></li>
空格隔开
后代选择器
div>p{
}
<p></p>
<div>
<p></p>
<p></p>
<ol>
<p></p>
</ol>
</div>
<p></p>
交集选择器
选择器1选择器2{
}
<div>
<p></p>
<p class="选择器1"></p>
<p class="选择器2"></p>
</div>
兄弟选择器
1.1
相邻兄弟选择器
紧跟后面的一个标签
div+p{
}
<div>
<p></p>
<p>p/>
</div>
<div>
<p></p>
</div>
通用兄弟选择器
div~p{
}{
<div>
<p></p>
<p>p/>
</div>
<div>
<p></p>
</div>
序选择器
1.1同级别
：first-child
:last-child
:nth-child
:nth-last-child
:nth-odtype(odd)
1.2同级别同类型
:first-of-type
:last-of-type
:nth-of-type
nth-last-of-type
nth-od-type(even)
属性选择器
p[id]
<p id="1"></p>
[attribute value]
p[class=cc ]
<p class="cc"></p>
属性以什么开头的
[attribute1= value] c2区分
[attribute^= value] c3
<img src="" alt="yuusauiuisa">
img<alt=^jsd>
1.3
属性以什么结尾的
[attribute$= value] c3
1.4
包含什么场景
[attribute~= value] c2区分
[attribute*= value] c3
通配符选择器
*｛
｝企业很少
优先级
!imoortant 只能提升优先级，其他无效。
id>class>通配符>继承>默认
权重问题
id越多优先级越高，id+class越多优先级越高，同理。
继承性 ，只能继承font tetx colr line,a 标签 underline h 无效。
div和span
div 是块级
span 是行内
disiplay:inline 不占行
block 单独占一行 可以设置宽高
inlne-block
背景颜色
line-height: 1.875;">background-image:url();
background-repeat:no-repeat;
:repeat-x
:repeat-y
background-position:left top/right top
具体像素
精灵图
width:px
height:px
background-image:url();
background-position:px px ;
background：背景颜色 背景图片平铺方式 关联方式 定位方式
background 可以清除任何一个属性
关联方式
background-attachmet:scroll 滚动条一起
背景图片和插入图片的区别
插入图片的占地方想用搜索搜到
背景图片有定位属性语义话强
背景图片
须于框架一样宽
盒子模型
边框属性
boreder-top
bottom
left
right
border:px solid/dashed color
连写
border-width:px px px px
border-style:style style style style
border-color: 上 右 下 左
左右对应，设置一个算全局。
内边距
padding:上右下左 宽高会有变化
top
right
left
外边距
margin-上右下左
top
right
left
外边距的合并
默认布局垂直方向，外边距不会叠加，谁大听谁的。
盒子
增加了border增加了盒子的大小
box-sizing: border-box; 可以保证盒子大小不变。
注意点如果两个盒子是嵌套关系，外面的盒子，会被里的盒子顶下来。
添加一个边框属性就不会顶下来。
企业开发需要控制嵌套关系，需考虑padding。
margin:0px auto.只对水平有有效。
text-algin:;只对文字图片有效。
margin:0px auto;
清除默认边距
*｛
margin:0px;
padding:0px;
｝
行高line-height:px;只能适用于一行
多行用padding 来设置水平居中
企业开发中盒子放的是文字一般以左边为准备。
标准流
行内元素
浮动流
float:left;
right;
在浮动流中不可以使用margin:0px autp;
不区分行内元素，块级元素
在浮动流不区分行内 块级都可以设置 宽高。
浮动元素 的脱标
先浮动找浮动，左浮动找左浮动，右浮动找右浮动。
贴靠现象，字围现象
标准流内容的高度可以撑起盒子的高度，浮动流不可以
清除浮动
overflow:hidden
1.1可以清除浮动 给第一个盒子添加
1.2不允许出内容
1.12可以设置第一个margin-bottom
第二个margin-top
i6需设置 *zoom:1;
嵌套关系，给外面盒子设置 overflow:hidden
定位流
1.1 相对定位
position:relative;
top:px;
区分行内
不脱离标准流
会占元素位置
1.2 绝对定位
脱离标准流
默认以body为参考点
position:absolute
top:xp;
那个祖先离的最近为他为参考点
静态定位无效
不区分行内，块级
子绝父相
奇门技巧居中
left=50%
backgrpund-attachment:fixed 随着滚动
1.3 固定定位
不占空间
不分行内
position:fixed
css基础精华
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。