2018-09-19-day23总结

1.浮动属性

标准流:浏览器对标签默认的布局方式就是标准流
块级:

2.标准流布局

标准流布局原则:块级标签一个占一行(不管标签的宽度是否是浏览器的宽度),
a.块级标签默认宽度是;父标签的宽度
b.默认高度是内容的高度
c.块级标签直接设置宽高是有效的
行内块标签:img(置换元素)
a.多个行内块可以在一行显示
b.默认宽高是内容宽高
c.直接设置宽高有效
行内标签:a
a.多个行内标签可以在一行显示
b.默认的宽高都是内容的宽高
c.直接设置宽高无效

3.display属性:转换标签的性质

display:block; 设置块级元素
display:inline-block;设置行内块
display:inline;设置行内标签
注意1:行内块标签和其他的标签之间默认有间隙,而且这个间隙无法消除
注意:置换元素<img><input><textarea><select><object>
有内置的宽高属性,可以设置宽高

4.浮动

1.怎么浮动

通过给css里面设置float属性float属性设置为left或者right来让标签浮动。浮动会让标签脱流
浮动的目的就是让竖着显示的可以横着来(针对块)

2.浮动的效果:

a.所有的标签浮动后,一行可以显示多个;默认的宽高是内容的大小;可以设置宽度和高度
b.一行显示不了的时候才会自动换行
<a href=''></a>

3.注意事项:

a.如果同一级的标签,后面的需要浮动,前面的也要浮动,否则可能会出现问题
b.浮动的标签不占池底的位置,只占水面的位置;不浮动的即占池底又占水面
c.left左对齐,right右对齐

            #div1{
                background-color: salmon;
                width:100%;
                height:200px;
            }
            
            #div2{
                background-color: seagreen;
                float: left;
                width:30%;
                height:800px;
                
            }
            #div3{
                background-color: skyblue;
                float: left;
                width:40%;
                height:800px;
                
            }
            #div4{
                background-color: seagreen;
                float: left;
                width:30%;
                height:800px;
                
            }


        <div id="div1">
            
        </div>
        <div id='div2'></div>
        <div id='div3'></div>
        <div id='div4'></div>

4.应用:文字环绕

被环绕的标签浮动,文字对应的标签不浮动。就会自动产生文字环绕的效果

5.清除浮动:清除浮动不是将标签的浮动去掉,而是清除因为浮动而产生的高度塌陷的问题

高度塌陷:父标签不浮动,子标签浮动并且不设置父标签的高度,就会产生高度塌陷的问题
清除浮动方式1:在父标签的最后添加新的div,并且设置其style里的clear为both

        <div style='clear:both;'></div>

清除浮动方式2:给父标签添加样式overflow的值为hidden

        <div style='overflow:hidden;'>

清除浮动方式3::通过父标签的style设置清除方式(万能清除法)
清除方式

    div #father{
        display:block;
        clear:both;
        content:'';
        visibility:hidden;
        height:0;
    }
    div #father{
        zoom:1;
    
    }

5.CSS可以通过left,right,bottom,top属性来设置标签的上下左右距离(但是默认情况下这些值不是都有效的)

想要让定位属性有效,通过position属性来设置参考对象。

1.position属性:

    -absolute:  生成绝对定位的元素,相对第一个非static/initial父标签进行定位
    -fixed:直接相对于浏览器定位
    -relative:相对于自己在标准流中的位置定位,当标签本身不希望去定位,只是想让自己的子标签可以相对其定位的时候使用
    -static:
    -sticky:当网页的内容不超过一屏(不滚动)的时候,就按照标准流进行定位,超过了就相对浏览器进行定位
    -initial:默认值,没有相对定位

2.注意:如果想要设置right值,要保证相对标签的宽度是确定的。如果想要设置bottom值,就要保证相对对象的height是确定的

3.技巧:当遇到某个方向定位死活都无效的时候,可以尝试让这个标签浮动,然后再定位

6.盒子模型

html中所有可见的标签都是一个盒子模型:包括长和宽决定的内容的大写,padding、border、margin四个部分组成。其中内容、padding、和
border是可见的部分,margin不可见
margin >border >padding >内容


图片.png

1.内容:设置width和height影响的是内容部分的大小。添加子标签、添加内容都是放在内容部分

2.padding:在内容的外围,可见部分,如果标签有背景颜色,那么这个部分的颜色和内容的颜色一致

padding-top:0px
padding-bottom:0px
padding-left:0px
padding-right:0px

3.border:边框,如果有padding添加到padding外边,如果padding没有宽度添加到内容的外面

border-top: 宽度 样式(solid(实线),dashed(虚线),dotted(点划线),double(双线)) 颜色
border-bottom:
border-left:
border-right:
border-radius:10px,可以通过这种方式设置圆角,值越大弧度越大

4.margin:添加到边框的外边,可以起到占位的作用

margin-left:宽度
margin-right:
margin-top:
margin-bottom:

7.其他常用的属性

1.字体相关的属性

字体颜色:color
字体大小:font-size
字体名:font-family,控制字体的表现类型
字体加粗:font-weight:bolder(更粗)/bold(加粗)/normal(常规)/100-900
字体倾斜:font-style:italic(倾斜)/oblique(倾斜)/normal(正常)

2.对齐方式 text-align:left(左对齐)/right(右对齐)/center(水平方向居中)

3.行高属性 line-height设置一行的高度,可以通过这个属性设置一行文字的垂直居中

4.文本修饰属性:text-decoration

none:取消修饰
underline:添加下划线
overline:添加上划线
line-through:添加删除线

5.首行缩进属性:text-indent:value

value的单位是em,表示空格,例如2em就是两个空格

6.字间距属性letter-spacing:value

value的单位是em,表示空格,例如2em就是两个空格,也可以是像素px,或者%

7.列表相关的属性

list-style-type:disc(实心圆)/circle(空心圆)/none(去掉)
list-style-image:url(地址) 将图片设置成列表的前面的提示
list-style-position:inside(里面)/outside(外面)

8.背景图片

background: 图片地址 是否平铺 x方向的坐标 y方法的坐标 背景色
background-image:url(图片地址) no-repeat(不平铺) 位置

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 12,774评论 1 91
  • 第一部分 HTML&CSS整理答案 1. 什么是HTML5? 答:HTML5是最新的HTML标准。 注意:讲述HT...
    kismetajun阅读 25,672评论 1 45
  • 学会使用CSS选择器熟记CSS样式和外观属性熟练掌握CSS各种选择器熟练掌握CSS各种选择器熟练掌握CSS三种显示...
    七彩小鹿阅读 5,595评论 2 66
  • 一、CSS入门 1、css选择器 选择器的作用是“用于确定(选定)要进行样式设定的标签(元素)”。 有若干种形式的...
    宠辱不惊丶岁月静好阅读 1,148评论 0 6
  • 灯火阑珊的夜晚 星光并不璀璨 本应如期赴约的明月 埋藏在厚厚的云层 不会 揭开那笼罩大地的黑幕 也不会 给予我们母...
    南山种土豆阅读 528评论 0 49
  • 人说你得到的太多会不想拥有,而从未得到又拼命要去争取。我从没有一个人生活,所以格外渴望一个人生活。 即使高中离开家...
    小宁檬阅读 95评论 0 0
  • “世界诗歌日 · 愿你的生命喜悦如诗”的微信,在这样微雨的清晨瞬间淹没了生活所有的奔波忙碌,是啊,纵使生活中...
    anhaoqingtian阅读 219评论 0 4
  • 雾都花儿阅读 64评论 0 3