菜鸟认识前端标签

1、padding 内填充 设置后会撑大容器大小,即大小为padding + 容器大小

 padding复合值

 padding:10px; //一个值:四个方向同大小,均为10px

  padding:10px 20px ; //两个值:上下同为10px,左右同为20px

 padding:10px 20px 30px ;  //三个值:上为10px,下为20px,  左右同为30px

 padding:10px 20px 30px 40px;  //四个值:上10px,右20px,下30px,左40px(即顺时针方向)

2、margin 外边距:标签与标签之间的距离

复合值同padding

注意:父子级包含关系时,子级的margin-top会传递给父级

解决:给父级设置border可以解决

注意:两个div同时设置margin,会出现上下叠压问题

解决:可以将某一个元素设置成预想的值,会取最大的margin值,即

给div1或者div2设置具体的margin值

如果元素没有特殊特征,也可以用padding代替

#box{
    background-color: red;
    border: 1px solid black;
}

#div1{
    height: 100px;
    margin: 100px 100px 200px 100px;
    background-color: yellow;
}

#div2{
    height: 100px;
    margin: 100px;
    background-color: blue;
}

认识标签
1、盒模型

盒子大小:border+padding+width/height

盒子宽度:左border+左padding+width+右padding+右border

盒子高度:上border+上padding+width+下padding+下border

2、a 超链接

伪类:给元素添加特殊的效果

  :link 未访问过连接的效果

  :visited 访问过后的连接颜色

  :hover鼠标移入(悬停)

  :ative 鼠标按下时连接颜色

**顺序 lv ha**

3、CSS中主要的伪元素有四个:before/after/first-letter/first-line,在before/after伪元素选择器中,有一个content属性,能够实现页面中的内容插入。(详解点击链接如下)

https://blog.csdn.net/fengqingtao2008/article/details/52732862

4、span 同一行几个字包裹用以区分样式

decoration:none 去掉a标签自带的下滑线

5、head 用于页面信息介绍,也可用于板块头部

6、nav 导航栏(包含链接的一个列表)

 <nav> <a href = ""></a>

 <a href = ""></a>

 <a href = ""></a>

 </nav>

7、footer 页脚 页面底部或者板块底部

8、section 页面板块 用于划分页面上的不同区域 或者划分文章里不同节

9、article 用来在页面中表示一套结构完整且独立的内容部分

10、aside 包含当前与当前页面或主要内容相关内容的引用、侧边栏、广告、nav元素组,以及其他类似有别与主要内容的部分

11、time 用来表示时间或者日期

12、常见标签

 h1-h6 标题

 p段落

 strong 强调 粗体

 me 情调 斜体

 span 区分样式

 ul 无序列表

 ol 有序列表

 li 列表项

 dl 定义列表

 dt 定义列表标题

 dd 定义列表项

 mark 标记

 img src 显示图片

13、css reset原则 (不要使用默认样式,因为每个浏览器下标签的默认样式可能会初心不一致的情况,故需要人为默认样式清除,后重新设置)

需要重置的内容

与盒模型相关的样式

 border

 margin

 padding

标签特有的样式

 ul>li

 ol>li

书写原则:

用到什么标签就清除所用的标签的默认样式,建议不要将所有的标签样式全部清除。

 body,dl,dd,p,h1,h2,h3,h4,h5,h6,{margin:0;font-size:12px;}

 ol,ul{margin:0;padding:0,list-style:none;}

 a{text-decoration:none}

 img{border:none;}

14、通配符:找到页面上的所有元素,不建议使用

15、选择器

id 唯一

类选择器

标签选择器

群组选择器、包含选择器

div,p,h1{}、 .box div1{}

通配符 *

16、选择器优先级

 style>id>class>类型选择器>*

  行间样式》id选择器》类选择器》标签  选择器

包含选择器优先级计算

群组选择器优先级,可类比为:

  行样式 1000

 id选择器 100

  类选择器 10

  标签选择器 1

.div div (10+1)

div div (100 +100)

依据此法计算群组选择器

17、块元素特征

默认独占一行

没有宽度是,默认撑满一行

支持所有css命令

内联元素

同排可以继续跟同类的标签

内容撑开宽度

不支持宽高

不支持上下的margin

代码换行被解析

18、块元素和内联元素的转换

display:block 显示为块

使内联元素具备块元素的特性

display:inline 显示为内嵌

是行块属性标签具备内联元素的特性

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

推荐阅读更多精彩内容

  • 概述 在网易云课堂学习李南江老师的《从零玩转HTML5前端+跨平台开发》时,所整理的笔记。笔记内容为根据个人需求所...
    墨荀阅读 2,334评论 0 7
  • •前端面试题汇总 一、HTML和CSS 21 你做的页面在哪些流览器测试过?这些浏览器的内核分别是什么? ...
    Simon_s阅读 2,220评论 0 8
  • 一、CSS入门 1、css选择器 选择器的作用是“用于确定(选定)要进行样式设定的标签(元素)”。 有若干种形式的...
    宠辱不惊丶岁月静好阅读 1,591评论 0 6
  • 浏览器与服务器的基本概念 浏览器(安装在电脑里面的一个软件) 作用: ①将网页内容渲染呈现给用户查看。 ②让用户通...
    云还灬阅读 1,113评论 0 0
  • 1.行内元素和块级元素?img算什么?行内元素怎么转化为块级元素? 行内元素:和有他元素都在一行上,高度、行高及外...
    极乐君阅读 2,414评论 0 20