day02

1.今天学了什么

1.HTML标签的分类

块标签:div,p,h1~h6,ul,li,dl,dt,dd,
特点:独占一行,能设置宽高
属性:display:block
内联标签:a,span,em,strong
特点:并排显示,不能设置宽高 不能设置margin-top,margin-bottom

属性:display:inline
内联块:button,img,input
特点:并排显示,可以设置宽高 
属性:display:inline-block

2.如何让内联元素和内联块元素水平居中

方法1:
          display:block
          margin-left:auto;
          margin-right:auto;
方法2:
          给父级加text-align:center

3.css选择器的分类:

<p class="test"id="first">hello world</p>
<h4>标题</h4>
css元素选择器1
文档的元素就是最基本的选择器
p{color:pink}
class选择器2
.p{color:pink}
id选择器3
#p{color:pink}
分组选择器4
p,h4{color:pink}
后代选择器5
div>p{}选取div所有子元素为p的标签
div p{}选取div后的所有p标签
兄弟选择器6
div+p{}选取紧邻div之后的第一个p标签
div~p{}选取紧邻div之后的所有p标签
属性选择器7
div[class='test']{}
伪类选择器8
div:hover{}
input:focus{}

4.选择器的优先级排序

元素选择器<class选择器<id选择器<!important
div{color:pink}<div.p{color:pink}<div#p{color:pink}<div{color:pink!important}

5.伪元素

":before''伪元素可以在元素的内容前面插入新内容
列: p:before{
      content:''
      }
''after''伪元素可以在元素的内容之后插入新内容
列: p:after{
      content:''
      }

2.我掌握了的

1.HTML标签的分类

块标签:div,p,h1~h6,ul,li,dl,dt,dd,
特点:独占一行,能设置宽高
属性:display:block
内联标签:a,span,em,strong
特点:并排显示,不能设置宽高 不能设置margin-top,margin-bottom
属性:display:inline
内联块:button,img,input
特点:并排显示,可以设置宽高
属性:display:inline-block

2.如何让内联元素和内联块元素水平居中

方法1:
          display:block
          margin-left:auto;
          margin-right:auto;
方法2:
          给父级加text-align:center

3.css选择器的分类:

<p class="test"id="first">hello world</p>
<h4>标题</h4>
css元素选择器1
文档的元素就是最基本的选择器
p{color:pink}
class选择器2
.p{color:pink}
id选择器3
#p{color:pink}
分组选择器4
p;h4{color:pink}
后代选择器5
div>p{}选取div所有子元素为p的标签
div p{}选取div后的所有p标签
兄弟选择器6
div+p{}选取紧邻div之后的第一个p标签
div~p{}选取紧邻div之后的所有p标签
伪类选择器8
div:hover{}
input:focus{}

5.伪元素

":before''伪元素可以在元素的内容前面插入新内容
列: p:before{
      content:''
      }
''after''伪元素可以在元素的内容之后插入新内容
列: p:after{
      content:''
      }

4.选择器的优先级排序

元素选择器<class选择器<id选择器<!important
div{color:pink}<div.p{color:pink}<div#p{color:pink}<div{color:pink!important}

3.我没掌握的

3.css选择器的分类:

属性选择器7
div[class='test']{}
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,827评论 1 92
  • A:今天学的内容 一、标签的分类 1、块标签(div、p、h1~h6、ul、li、dl、dt、dd) 特点:1.独...
    AnnQi阅读 262评论 0 0
  • A我今天学到了什么 一.html的分类 1.块标签 2.内联标签 3.内联块标签 二.让内联元素和内联块元素水平居...
    孔子曰_f425阅读 263评论 0 0
  • 1.HTML标签的分类 1.1块标签 特点: 1.2内联标签 特点: 1.3内联块标签 特点: 2.水平居中(内联...
    陈梦晴阅读 371评论 0 0
  • 上一回讲到,垦丁一日游。接下来的行程是台东的花莲一带,首先需要拼车前往,这里有海岸线和山岸线,对于初次游玩的,建议...
    信长工阅读 196评论 0 0