2020.3.26.第八天

<!--  

css的显示对标签分类:

块状元素

内联元素(行内元素)

争议点:

第三类:

a:可变元素

b:行内块元素

-->

<!--  

元素类型分类:块状元素、内联元素、可变元素。

注:把行内块元素归在内联元素这一类里面。

-->

<!--

默认情况下元素类型每个类型特点:


块状元素特点:

1:在页面中以矩形区域显示。

2:自上而下排列,独占一行

3:可以直接添加宽高

4:一般情况下,作为其他元素或内容的容器


内联元素特点:

1:在页面中最小单位也是矩形。

2:在一行内逐个排列。

3:不可以直接添加宽高,大小是由内容撑开的。

4:内联元素也符合盒模型的规则,但是个别属性会出现问题(padding-top/bottom    margin-top/bottom)

5:内联元素在一行内排列的时候,之间有间距

(怎么消除间距:

a:添加浮动  

b:把所有的内联元素都放在一行不用回车键(不推荐使用)。  


可变元素(了解):

根据上下文的显示,来确定这个元素是块状元素还是内联元素

<button>按按钮按钮按钮钮</button>

-->


<!--  

哪些标签属于块哪些标签属于内联:


块状元素:

div -最常用的块级元素

dl -和dt-dd 搭配使用的块级元素

form -交互表单

h1 -h6-大标题

hr -水平分隔线

ol– 有序列表

p -段落

ul -无序列表

        li

fieldset -表单字段集

colgroup-col -表单列分组元素

table-tr-td表格及行-单元格


内联元素:

a–超链接(锚点)                               

b -粗体(不推荐)

br -换行                             

i -斜体

em -强调                             

img -图片                         

input -输入框               

label -表单标签                  

span -常用内联容器,定义文本内区块

strong -粗体强调

sub -下标   

sup -上标

textarea -多行文本输入框

u -下划线

select -项目选择  

-->

<!--  

元素类型的转换:

display属性:

作用:检索或者设置元素生成的盒模型类型。


常用属性值:

            a: display:block;

作用:将元素转成块状元素,拥有块状元素特点。

补充:大部分块状元素,默认的display的值都是block;


            b: display:inline;

作用:将元素转成内联元素,拥有内联元素的特点。

补充:大部分内联元素,默认的display的值inline;


            c: display:none;

作用:将当前隐藏,并不占据空间。


-->

<!--  

拓展知识点:

任何元素添加浮动,都可以设置大小。

-->

<!--  

1:元素类型分类:

块状元素、内联元素、可变元素

(内联块元素放在内联这一类里面)

2:每类元素各自的特点:

3:每个标签属于哪一类!!!

4:元素类型的转换

display属性:

            block

            inline

            none

-->

<!--  

作业:

1:整理元素类型笔记(每类元素各自的特点、每个标签属于哪一类)

2:导航案例(4个导航案例)

3:写页面!

-->

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 本文主要是起笔记的作用,内容来自慕课网. 认识CSS样式 CSS全称为“层叠样式表 (Cascading Styl...
    0o冻僵的企鹅o0阅读 2,685评论 0 30
  • 什么是选择器 每一条css样式声明(定义)由两部分组成,形式如下: 在{}之前的部分就是“选择器”,“选择器”指明...
    小挠许阅读 360评论 0 1
  • 本课来自http://www.imooc.com/learn/9请不要用作商业用途。 HTML5 HTML介绍 H...
    PYLON阅读 3,358评论 0 5
  • 一 外部式css样式 (也可称为外联式)就是把css代码写一个单独的外部文件中,这个css样式文件以“.css...
    KunMitnic阅读 1,001评论 0 1
  • day01­_起源和结构 结构:Xhtml xml 表现:CSS 行为:DOM ECMAScript 以上都属于W...
    Sakura_明妃阅读 1,261评论 0 1