day02

.###A我今天学到了什么

html标签的分类

1、块标签:

 独占一行、能设置宽高;
常用的块标签:div, p,h1~h6,ul,li,dl,dt,dd.
display:block

2、内联标签:

并排显示、不能设置宽高;不能设置margin-bottom,margin-top
常用的标签:a,span,em,strong;
display:inline

3、内联块:

并排显示、能够设置宽高
常用的标签:img,button,input
display:inline-block

4、如何让内联元素和内联块元素水平居中

方法一:转化成块元素
display:block
margin-left;margin-right.
方法二:
给父级加text-align:center

5、CSS选择器的分类

<p class=‘test’  id='first'>hello word</p>
<h4>标题</h4>
CSS元素选择器:
p{color:blue}
class选择器:
.test{color:red}
id选择器:
#first{color:yellow}
分组选择器:
p,h4{background:gray}
后代选择器:
div>span{}
//选取div所有子元素为span的标签
div span{}
//选取div之后的所有的元素
兄弟选择器:
div+p{}
选取紧邻div的第一个兄弟元素p
div~p{}
选取div之后的所有元素
属性选择:
div[class='test']{}
伪类选择器:
div:hover{}元素
input:focus{}搜索框
伪元素:
“before”:可以在元素的内容前面插入新内容
p:before{content:"    "}
“after”:可以在元素的内容后面插入新内容
p:after{after:“    ”}
选择器的优先级排序:
!importent>ID选择器>class选择器>p元素选择器
div{color:red !importent}>div#fiest{color:yellow}>div.test{color:red}>p{color:blue}

B我今天掌握了什么

1、块标签:
 独占一行、能设置宽高;
常用的块标签:div, p,h1~h6,ul,li,dl,dt,dd.
display:block
2、内联标签:
并排显示、不能设置宽高;不能设置margin-bottom,margin-top
常用的标签:a,span,em,strong;
display:inline
3、内联块:
并排显示、能够设置宽高
常用的标签:img,button,input
display:inline-block

4、如何让内联元素和内联块元素水平居中

方法一:转化成块元素
display:block
margin-left;margin-right.
方法二:
给父级加text-align:center

CSS选择器的分类
<p class=‘test’  id='first'>hello word</p>
<h4>标题</h4>
CSS元素选择器:
p{color:blue}
class选择器:
.test{color:red}
id选择器:
#first{color:yellow}
分组选择器:
p,h4{background:gray}
后代选择器:
div>span{}
//选取div所有子元素为span的标签
div span{}
//选取div之后的所有的元素
兄弟选择器:
div+p{}
选取紧邻div的第一个兄弟元素p
div p{}
选取div之后的所有元素
属性选择:
div[class='test']{}
伪类选择器:
div:hover{}元素
input:focus{}搜索框
伪元素:
“before”:可以在元素的内容前面插入新内容
p:before{content:"    "}
“after”:可以在元素的内容后面插入新内容
p:after{after:“    ”}
选择器的优先级排序:
!importent>ID选择器>class选择器>p元素选择器
div{color:red !importent}>div#fiest{color:yellow}>div.test{color:red}>p{color:blue}

C哪里掌握的不好

1.内联元素

常用的内联元素

a,span,i,em,strong
//特点:
a.并排显示 
b.不能设置width和height 
c.不能设置margin-top和margin-bottom

2.后代选择器

//HTML
<div>
  <p>hello world</p>
  <p>hello world</p>
  <ul>
    <li><p>hello world</p></li>
    <li><p>hello world</p></li>
  </ul>
</div>
//css
<style>
div>p{} 
div p{}
</style>
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,814评论 1 92
  • 1.HTML标签的分类 1.1块标签 特点: 1.2内联标签 特点: 1.3内联块标签 特点: 2.水平居中(内联...
    陈梦晴阅读 370评论 0 0
  • A我今天学到了什么 一.html的分类 1.块标签 2.内联标签 3.内联块标签 二.让内联元素和内联块元素水平居...
    孔子曰_f425阅读 262评论 0 0
  • A今天学到了什么 1.HTML标签的分类 1.1块标签 1.2内联标签 1.3内联块标签 1.4如何让内联标签实现...
    Summer_b1a9阅读 202评论 0 0
  • 阴雨绵绵的日子总能让人静下心来,突然好想见某人,想到就去做,拿起电话:“有时间吗?聚聚”“好呀,下班过来”我煮着茶...
    汪凌眉阅读 570评论 1 7