手机版
网站地图
美文美图
最新动态
你好,欢迎访问
好美文阅读网
个性皮肤
搜索
网站首页
美文
文章
散文
日记
诗歌
小说
故事
句子
作文
签名
祝福语
情书
范文
读后感
文学百科
美文摘抄
节日文章
名家散文
网名大全
座右铭
口号大全
面试技巧
说说大全
阅读答案
诗词默写
流言蜚语
节日祝福
好句子
经典台词
谚语大全
亲情故事
友情故事
表白情书
工作报告
活动总结
心得体会
专题汇总
美文网首页
盒模型及标签
盒模型及标签
作者:
likeli
| 来源:发表于
2017-08-17 20:14 被阅读0次
今天学习的第二天,今天主要学习了盒模型、标签的分类、CSS三种引入方式以及CSS选择器
1.盒模型:
盒模型分为标准盒模型以及怪异盒模型。
标准盒模型的内容尺寸:width*height;盒子尺寸:(width+padding+border)*(height+padding+border);盒子的区域尺寸:(width+padding+margin+border)* (height+padding+margin+border)。
怪异盒模型的内容尺寸:(width-padding-border)*(height-adding-border);盒子尺寸:width*height;盒子的区域尺寸:(margin+margin)*(height+margin)。
怪异的盒模型一般出现在IE6,IE7,IE8。
盒子与盒子之间尽量用margin,盒子内部用padding 盒子尺寸尽量用auto
2.标签的分类
一般标签分为block,inline,inline-block三类
2.1 block标签的作用:独占一行,不与其他标签同行排列,可以设置宽高,当没有设置宽高时,他的宽会默认其父级的宽,高则由内容撑开
2.2 inline标签的作用:可以和行级标签以及行块标签同行排列,不能设置宽高,宽高由内容撑开;
2.3 inline-block标签的作用:不会独占一行,可以和行级标签以及行块标签同行排列,可以设置宽高,但是有个缺点,在同行排列时如果一个有文字一个没有文字时,他会文字的底部
和标签的头部同行排列,要设置基线对齐,或其他方式才能对齐,一般用在列表与结构相同的盒子中。
3.CSS的三种引入方式
行间样式,内部样式以及外部样式
3.1行间样式:写在标签内部,例如:<div style="width:100px;height:100px;border:1px solid red;"></div>
优点:不会产生额外的请求
缺点:会产生大量的代码冗余,导致文档体积变大;不利于维护;不符合样式与结构分离的规范
3.2内部样式:写在head标签里面的,例如
优点:初步实现了样式与结构分离的规范;不会产生额外的请求;适合单网页网站
缺点:代码不能复用
3.3外部样式,写在外部的CSS里面的,引入方式为:<link rel="stylesheet" href="css/index.css"/>
优点:完全符合样式与结构的分离;便于维护;代码可以重复使用
缺点:会产生额外的请求(但后期我们会学习其他的可以去除这个缺点)。
综上所述,我们一般都会使用外部样式。
4.CSS选择器
选择器分为基础选择器-统配选择器,基础选择器-标签选择器(tags),基础选择器-群组选择器,基础选择器-类选择器 .类名称以及后代选择器
4.1统配选择器(),使用方式:*{},作用于所有标签,无论你有没有写,有没有出现在文档中
4.2标签选择器(tags)作用于一类标签,方式是通过标签名称,如 div{}
4.3群组选择器,用于优化代码,减少文档体积,如:div,.box,span,h1,h2,li,ul{}
4.4类选择器 .类名称,可以用于各种场景,是我们最常用的选择器,class名可以多个,多个class名用空格隔开。
主要用于具有相同样式的元素,如:<div class="box1 box2 box3 li10"></div>
.box1{width:100px;}
.box2{background:gray;}
.box3{border:1px solid red;}
.li10{font-size:12px;}
4.5后代选择器 选择器1 选择器2 ...只作用于最后一个选择器,前面的选择器只是过滤条件,帮助我们定位如:div div div span{}
通过一天的学习对知识点更加的巩固与掌握,但是肯定也会有不足之处,我相信这总结的肯定会有很多漏洞,我相信通过日积月累肯定会弥补过来的。
相关文章
网友评论
本文标题:
盒模型及标签
本文链接:
https://www.haomeiwen.com/subject/ehmnrxtx.html
延伸阅读
那年盛夏诗歌
环境监察队工作总结范文
优秀教师学习心得范文
华胥引的读后感300字
《Its red》教学反思范文
农资购销的合同范本
竞选中队委优秀演讲稿
辞金蹈海的成语解释
《世纪宝鼎》公开课教案设计
因为爱你,所以牵挂
今生今世红尘醉——美到
一个90后的内心独白
致已逝去的高中年华
深度阅读
您也可以注册成为美文阅读网的作者,发表您的原创作品、分享您的心情!
情人节
母亲节
重阳节
清明节
端午节
植树节
元宵节
妇女节
愚人节
圣诞节
父亲节
教师节
儿童节
劳动节
青年节
建军节
万圣节
平安夜
光棍节
中秋节
国庆节
感恩节
腊八节
更多话题
栏目导航
摄影
故事
互联网
读书
旅行
热点阅读
盒模型之我的理解
戏谑的十二生肖遇上五彩斑斓的雕梁画栋
雅思口语描述题技巧
玩的都是惊险刺激
7.2格式化输出
假借朋友之名的爱。
游乐园的记忆
打也打了,骂也骂了,为什么孩子还是"熊孩子"
盒模型、css的引入方式以及选择器
七夕联合征文|我和成都有场浪漫邂逅
网友评论