笔记二

继承
给父元素设置属性,子元素也可以使用。

注意点:
1.并不是所有的属性都可以继承,只有以/color/font/text-/line 为开头的属性才可以继承

2.在CSS继承中不仅仅是儿子可以继承,只要是后代都可以继承

CSS继承中的特殊性:
a标签中的文字颜色和下划线是不能继承的
h标签的文字大小是不能继承的

应用场景:
一般用于设置网页上的一些共性信息,例如网页的文字颜色,字体,大小
less处理代码的多余空间


层叠
层叠性就是CSS处理冲突的一种能力

注意点:
层叠性只有在多个选择器选中“统一标签”然后又设置了“相同的属性”才会出现层叠性
同一个标签同一个属性


优先级
当多个选择器选中同一个标签,并且给同一个标签设置相同的属性是,如何层叠就由优先级来确定

优先级判断的三种方式:
1.是否是直接选中(间接选中就是指继承)
如果是间接选中,那么就是谁离目标标签比较近就听
谁的

2.是否相同选择器
如果都是直接选中,并且都是同类型的选择器,那么就是谁写在后面就听谁的

3.不同选择器
如果都是直接选中,并且不是相同类型的选择器,那么就会按照选择器的优先级来层叠

id>类>标签>通配符>继承>浏览器默认
行内样式比ID高


!important
用于提升某个直接选中标签的选择器中的某个属性的优先级的,可以将被指定的属性的优先级提升为最高

注意点:
!important 只能用于直接选中而不能用于间接选中
通配符标签选中的标签也是被直接选中的
!important 只能提升被指定的属性的优先级,其它的属性的优先级不会被提升
!important 必须写在属性值的分号前面
!important 的“!”不能被省略


权重
当多个选择器混合在一起使用时,我们可以通过计算优先级权重级最高

权重的计算规则:
1.首先先计算选择器中有多少个id,id多的选择器优先级高
2.如果id的个数一样,那么再看类名的个数,
类名多的选择器优先级高
3.如果类名的个数一样,那么再看标签名称的个数
标签名多的选择器优先级高
4.如果id个数一样,类名个数也一样,标签名称个数也一样,那么就不会继续往下计算了,那么此时谁写在后面听谁的
也就是说优先级如果一样,那么谁写在后面听谁的

注意点:
选择器是直接选中标签的才需要计算权重,


div
一般用于配合css完成网页的基本布局

span
一般用于配合css修改网页局部信息

div与span的区别
1.div会单独占领一行,span不会单独占领一行
2.div是一个容器级别的标签
3.span是一个文本级别的标签

容器级的标签和文本级的标签的区别
容器级的标签可以嵌套其它所有的标签
文本级的标签只能嵌套文字/超链接/图片


在html中html将所有的标签分为两类,分别是容器及和文本级
在css中css也将所有的标签分为两类,分别是快级元素和行内元素

块级元素会独占一行而行内元素不会独占一行

块级元素
如果没有设置宽度,那么默认和父元素一样宽
如果设置了宽高,那么就按照设置的宽高来显示

行内元素
如果没有设置宽度,那么默认和内容一样宽
行内元素是不可以设置宽度和高度的

行内块级元素
为了能够让元素既不独占一行,有可以设置宽度和高度,那么就出现了行内块级元素


元素显示转换
display: inline;转换行内 di
display: block;转换快级 db
display: inline-block;转换为行内块级 dib


background
给标签设置背景颜色
background-image: url();
设置背景图片
background-repeat
背景图片平铺(默认是平铺的)
background-repeat:no-repeat
不平铺
background-repeat:repeat-x
水平平铺
background-repeat:repeat-y
垂直平铺

应用场景:
可以通过背景图片平铺来降低图片的大小,来提高网页访问的速度


背景定位

注意点:
同一个标签可以同时设置背景颜色和背景图片,如果颜色和图片共存,那么图片会覆盖颜色

background-position
背景图片定位

缩写:
background:颜色 图片 平铺方式 关联方式 定位方式
background任何一个属性都可以被省略


背景关联
修改背景图片与滚动条的关联方式
background-attachment不绑定滚动默认取值scroll
绑定滚动fixed


背景图片与插入图片的区别

背景图片仅仅是一个装饰 不会占用位置
插入图片会占用位置

背景图片有定位属性,所以可以很方便的控制图片的位置
插入图片没有定位属性,所以不能控制图片的位置


CSS精灵图
CSS精灵图是一种图像合成技术

作用:
可以减少请求的次数,以及降低服务器处理压力

配合背景图片和背景定位来使用


边框
边框就是环绕在标签宽度和高度周围的线条


内边距
边框和内容之间的距离就是内边距

注意点:
给标签设置内边距后,标签占有的宽高度发生变化
内边距也会有背景颜色


外边距
标签与标签的距离就是外边距
外边不会有背景颜色


外边距合并
水平方向
外边距会出现叠加现象

垂直方向
谁的外边距大就听谁的


CSS3中新增了一个box-sizing的属性:
这个属性可以保证我们给盒子增加内边与外边和boder的时候不会变形(会减除内容的款高度)

如果两个盒子是嵌套关系,那么设置了里面一个盒子的顶部的外边距,外面一个纸盒也会被顶下来

如果外面的盒子不想被一起顶下来,那么可以给外面的盒子添加一个边框属性

在企业开发中,一般情况下如果需要控制嵌套关系盒子之间的距离,应该首先考虑pandding,其次再考虑margin
margin本质上是控制兄弟关系之间的间隙

注意点:
在嵌套关系的盒子,我们可以利用margin:0 auto的方式来让里面的盒子在外面的盒子中水平居中,此方式只对水平方向有效,对垂直无效


transform: translate();平移操作:后面跟坐标值
移动块级标签平移


外墙法清除浮动:
在两个盒子中间加一个块级元素
在这个块级元素中加一个clean-both

注意点:
可以让第二个盒子使用margin-top属性
不可以让第一个盒子使用margin-bottom属性

内墙法清除浮动:
在第一个盒子中所有子元素最后添加一个块级元素
在这个额外添加的块级元素中加一个clean-both

注意点:
可以让第二个盒子使用margin-top属性
可以让第一个盒子使用margin-bottom属性

区别:
外墙法不能撑起第一个盒子的高度,而内墙法可以


伪元素选择器:
伪元素选择器的作用就是给指定标签的内容前面添加一个子元素或者给指定标签的内容后面添加一个子元素

*zoom:1;兼容ie6

overfow:hidden
将超出标签范围的内容裁剪掉
清除浮动

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 194,242评论 5 459
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 81,769评论 2 371
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 141,484评论 0 319
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 52,133评论 1 263
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 61,007评论 4 355
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 46,080评论 1 272
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 36,496评论 3 381
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 35,190评论 0 253
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 39,464评论 1 290
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 34,549评论 2 309
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 36,330评论 1 326
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 32,205评论 3 312
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 37,567评论 3 298
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 28,889评论 0 17
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,160评论 1 250
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 41,475评论 2 341
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 40,650评论 2 335

推荐阅读更多精彩内容

  • 转载请声明 原文链接地址 关注公众号获取更多资讯 第一部分 HTML 第一章 职业规划和前景 职业方向规划定位...
    程序员poetry阅读 16,499评论 32 459
  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,703评论 1 92
  • •前端面试题汇总 一、HTML和CSS 21 你做的页面在哪些流览器测试过?这些浏览器的内核分别是什么? ...
    Simon_s阅读 2,216评论 0 8
  • 1.CSS基本概念 1.1 CSS的定义 CSS(Cascading Style Sheets)层叠样式表,主要用...
    寥寥十一阅读 1,793评论 0 6
  • 房子空无一人 响起流水的声音 引我闭目侧耳 细听 沿一道清溪 溯流而上 身边有枫叶漂游 透明的梦中 云雀飞旋 原野...
    林嘉梓阅读 474评论 38 26