2019-07-20来黑马程序员的第九天(上课)

今天的知识点如下:1、CSS的三大特性 2、盒子模型 3、其他知识补充


一、CSS的三大特性

1、继承性:后代元素可以继承祖先元素的属性,和文字相关的属性都可以继承,如font-系列、text-系列、line-height 、color

注意:1、一个元素自己有对应的属性,那么就不会去继承祖先的元素

           2、a标签的颜色需要单独设置

2、层叠性:在权重相同的情况下后渲染的CSS会覆盖先前渲染的CSS

3、优先级:优先级:一个标签可以被多个选择器选中,那么最终谁起作用,这个选择器的权重就最高

优先级的鄙视链:继承<通配符选择器<标签选择器<类选择器<id选择器<行内样式<! important

!important 只是针对单条属性 而不是选择器 尽量少用

权重叠加:当出现复合选择器的时候,会出现权重叠加

4、权重叠加

关于CSS权重,我们需要一套计算公式来去计算,这个就是 CSS Specificity,我们称为CSS 特性或称非凡性,它是一个衡量CSS值优先级的一个标准 具体规范入如下:

二、盒子模型

1、边框:给盒子的周围添加一个边框

边框的组成:1、边框的宽度border-width 单位是px

                      2、边框的样式border-style 常用的值 solid实线 dashed虚线 dotted点状 double双实线

                      3、边框的颜色border-color 默认值是黑色

一般我们使用简写的方式如:border:1px solid red;

单一方向的边框写法:border-方位名字 border-left border-right border-top border-bottom

如border-left:1px solid red 

特殊值:none 去除边框

单一方向单一属性写法:border-top-width:1px;

                                        border-top-style:solid;

                                        border-top-color:red;

2、内边距:介乎于内容和外边框之间

取值方式如下:(1)一个值 表示上下左右都是一样的

                         (2)两个值 第一个代表上下 第二个代表左右

                         (3)三个值 第一个代表上  第二个代表左右 第三个代表下

                         (4)四个值 上右下左  顺时针

单一方向的的写法:padding-方向值 如padding-top:10px padding-left:10px

注意:行内标签只能只设置 padding-left和padding-right

3、外边距:(1)不是用来修改盒子大小的,而是用来移动盒子的 (2)控制的是盒子与盒子之间的距离

属性值: 1、一个值 上下左右 如margin:10px;

               2、两个值 上下 左右 如margin:10px 10px;

               3、三个值 上 左右 下 如margin:10px 20px 10px;

               4、四个值 上 右 下 左 顺时针方向 如margin:10px 20px 20px 10px;

单一方向属性:1、margin-top 使盒子向下移动

                          2、margin-right 使右边的盒子向右移动

                          3、margin-bottom 使下面的盒子向下移动

                          4、margin-left 使盒子向右边移动

特殊值:margin:0 auto; 使上下为0,左右自动,在页面的中的显示效果是水平方向居中

3、其他知识点补充

1、页面布局的套路:(1)划分盒子 (2)写结构 (3)初始化盒子(就是给盒子设置宽高背景颜色) (4)摆放盒子 (5)细节优化

2、进行布局的时候需要给所有的标签去除内外边距,使用方式如下:

* {

    padding:0;

    maring:0;

}

3、使用box-sizing进行自动缩减、使用list-style-type去除列表格式 使用格式如下:

(1)box-sizing:border-box;

(2)list-style-type:none;


嗯,今天就这么多,再接再厉。

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

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,754评论 1 92
  • 一、CSS入门 1、css选择器 选择器的作用是“用于确定(选定)要进行样式设定的标签(元素)”。 有若干种形式的...
    宠辱不惊丶岁月静好阅读 1,598评论 0 6
  • 不会用代码框,所以看着有些乱套,,,,html部分 <!DOCTYPE html> 迅雷看看 ...
    这就是个帅气的名字阅读 1,536评论 0 0
  • day01­_起源和结构 结构:Xhtml xml 表现:CSS 行为:DOM ECMAScript 以上都属于W...
    Sakura_明妃阅读 1,195评论 0 1
  • 作者:黑泽明 简介:《蛤蟆的油》是日本著名电影导演黑泽明写的一本自传,书中主要记述了黑泽明从童年时代到青年时代再到...
    邓义福阅读 529评论 0 1