继续浏览精彩内容
慕课网APP
程序员的梦工厂
打开
继续
感谢您的支持,我会继续努力的
赞赏金额会直接到老师账户
将二维码发送给自己后长按识别
微信支付
支付宝支付

基础选择器,CSS3选择器, 盒模型,浮动

小泡泡
关注TA
已关注
手记 43
粉丝 51
获赞 617

CSS新知识
CSS怎么学?有两个知识部分:
1、 选择器,怎么选择元素
2、 属性,样式什么,可以设置一些属性,完成网页的布局
1、 基础选择器
1.1 标签选择器
使用时会把所有的标签设置上该属性,不太安全,所以一般在初始化样式使用
图片描述
不论藏多深多会被识别:
图片描述
1.2 类选择器
图片描述
1.3 ID选择器
选择符是#
图片描述
l 只能有字母、数字、下划线
l 必须以字母开头
l 相同的ID只能出现一次
l 不能和标签同名,不能叫:body,img,a
1.4 后代选择器
图片描述
空格,就表示后代, .div1 p 就表示.div1的后代的所有p
1.5 交集选择器
图片描述
交集选择器没有空格,在html中class里使用的时候用空格分开(这句话很2)
1.6 并集选择器
用逗号隔开
图片描述
总结,思考下面代码出现了几种类型的选择器:
图片描述
CSS3选择器

l 儿子选择器
ul>li>p
图片描述
l 属性选择器: [属性名=‘属性值’]
图片描述
l 序选择器
图片描述
:last-child 选择父元素下的最后一个
:first-child 选择父元素下的第一个
:nth-child(n) n>=0 选择父元素第n个元素
图片描述
练习任务:li排行榜,只要模拟小方块即可,将第1,2,3个小方块颜色分别设置成红,橙,黄,其余的颜色设置成淡黄色(greenyellow)
图片描述
2、 CSS继承性和层叠性
继承性:有一些属性给自己设置的时候,自己的后代都继承了,这就是继承性
哪些属性能被继承?(跟文字有关的)
color、font-开头的、line-开头、text-开头
补充知识:
ž 浏览器能正常识别的汉字字体有3中:微软雅黑、宋体、黑体
ž 文字大小:默认16px
ž 文字缩进: text-indent:2em;
ž 字体定义的缩写:font:字体大小/字体行高 “字体的家族”
图片描述
图片描述
层叠性:
很多公司,如果要笔试CSS,那么一般都会考层叠性
概念:就是CSS处理冲突的能力。
3、 盒模型
3.1 盒子中的区域
width、height、padding(内边距)、border、margin(外边距)
一个盒子在网页中占据宽度=
左border+左padding+width+右padding+右border
3.2 认识padding
ž padding就是内边距
ž padding的区域有背景颜色
ž padding有四个方向,分别是上、右、下、左
ž padding的缩写形式:
padding:50px 50px 50px 50px; 上、右、下、左
padding:50px 50px 50px; 上、左右、下
padding:50px 50px; 上下、左右
使用注意:盒子width属性+左右padding+左右border=盒子在页面中的显示宽度
3.3 认识border
border:1px solid #ccc
图片描述
3.4 块级元素和行内元素
块级元素
ž 霸占一行,不能与其他任何元素并列
ž 能接受宽、高
ž 如果不设置宽度,那么宽度将默认编程父元素的宽度的100%
ž 能正常的设置margin和padding
行内元素
ž 与其他行内元素并排
ž 不能设置宽、高。默认的宽度,就是文字的宽度
ž 不要设置上下margin和padding,因为会早未知的错乱。
display:block和display:inline 可以让双方相互转换

3.5 display属性
display 就是显示的意思,用来改变元素的行内、块级性质
常用的值有,inline、block、inline-block、none
inline-block就是元素既可以设置宽、高、外边距、内边距等属性,又能让相邻的inline元素或inline-block元素在一行摆放,有个好的搭档vertical-align: middle,经常伴随着inline-block属性存在的。
img 、input 默认就是inline+-block的

3.6 伪类 :hover
图片描述
4、 浮动
浮动是CSS里面,布局用的最多的一个属性。
可以让,两个元素并排摆放,并且两个元素都能够设置宽度和高度了
知识点: 行内元素一旦设置浮动,display属性变成block
图片描述
4.1 浮动元素的脱离标准文档流
图片描述
4.2 浮动元素互相贴靠
如果有足够的空间,浮动元素会相互贴靠,如果空间不够,会往下挤
图片描述
设置右浮动:
图片描述
4.3 浮动元素字围
图片描述
给img设置浮动,而p标签并没有设置浮动,却产生了字围效果
4.5 浮动清除的三种思路
ž 给浮动的父元素设置固定的高度
ž 设置clear元素,两种用法
方法1:在父元素最后方,放置空div,专门清除浮动
图片描述
图片描述
方法2:给父元素添加一个class=“clearfix”
图片描述
图片描述
ž 设置父元素overflow:hidden
优点,代码量少,干脆
缺点,会遮盖内部元素

打开App,阅读手记
4人推荐
发表评论
随时随地看视频慕课网APP