实力进阶HTML5和CSS3教程--不看后悔

浮动

    使用场景
        想要竖着的横着过去的时候用
        可以实现文本环绕效果
    浮动的相关属性值
        float:none;  默认值
        float:left; 向左浮动
        float:right; 向右浮动
    特点
        一个盒子浮动了之后,该盒子不占据浏览器的位置,下面的盒子如果没有浮动,则会上去
        多个盒子同时浮动之后,会横着排列,如果同时给的左浮动,那么会从左往右排列,如果同时给了右浮动,那么是从右往左排列
    注意点
        在包含结构里面,如果父元素没有设置高度,所有的子元素都浮动了,此时父元素会高度塌陷
            解决方法1:给父元素添加overflow:hidden;   ()
            解决方法2:给父元素添加height
            解决方法3:给所有的浮动元素后面添加一个空的标签,且添加声明clear:both;

清除浮动

    使用场景
        想要改变因为浮动引起的排列方式的时候

        属性值:clear:none默认值 clear:left;clear:right;clear:both;

盒子模型

标准盒子模型:组成部分:内容+margin+padding+border        

怪异盒子模型:组成部分:内容+margin    给该盒子添加box-sizing:border-box; 特点是,怪异盒子添加padding或者border不会把盒子撑大成了内容的一部分

外间距margin  单独设置:margin-top margin-left  margin-right margn-bottom   简写:margin:20px-表示4个方向都是20  margin:20px 50px 表示上下是20  左右是50  margin:20px 50px 80px 表示上20 左右50 下80 margin:20px 50px 80px 100px  表示上20 左50 右80 下100.     如果写margin:auto;目前只有左右有效果 可写margin: 0 auto.实现一个有宽度的盒子水平居中 

两个margin高度问题:一,在包含结构里面,给子元素设置了margin-top,应该是子元素自己下来,但是父元素也会下来,这个现象叫做margin-top传递.解决办法:1,给父元素添加overflow:hidden(用了BFC机制);2,给父元素添加border-top;3,给父元素或者子元素添加浮动.       二,在并列结构里面,给上面的盒子设置了margin-bottom,给下面的盒子添加了margin-top,此时应该解析两个间距之和,但浏览器解析的是最大数值的间距.解决办法:给下面的添加一个父元素,且添加声明overflow:hidden.

内间距padding 需要设置间距,且该间距相对于盒子来说是里面的时候   设置格式同margin不再列举.     padding使用的注意点,padding是添加在盒子大小之上的,会把盒子撑大,解决办法:1,设置盒子宽度或者高度的时候减去添加上去的padding值;2,触发为怪异盒子.

border边框:拆开写:边框宽度 border-width:2px 20px 30px 40px        border-style:solid(实线)      还有dashed虚线()  dotted  double           边框颜色border-color:           简写是重点:全边框border:3px solid red;     单边框简写:border-top:3px solid blue; border-bottom;border-left;border-right.      用CSS的边框书写箭头朝上的三角形:   width:0;heigh:0;border:30px solid transparent;border-bottom:30px solid red;

页面书写注意事项

学了浮动可以布局一些页面了,注意事项列举;1,input和button水平之间有缝隙和距离顶部的间距不一致--解决:给input或者button添加浮动.2;button默认解析怪异盒子.3,页面缩放的时候,边框会发生变化,如果数据刚刚好的情况下,边框变大会把后面的内容挤下去,想要解决给添加边框的盒子触发怪异盒子.4去除input点击上去的黑边框,给input添加ouline:none;5,改变鼠标指针的样式属性 cursor.变小手 cursor:pointer; 移动  cursor:move;6,<img>在页面解析的时候,会向下有缝隙,大概是3-4像素,解决办法1:给img添加displa:block;2,给img添加vertical-align:center.3,给报着img的盒子添加border-size:0.7,去除列表样式 list-style:none;  修改列表样式:list-style-type:disc/square/circle/none.修改列表符号的位置 list-style-position:outside/inside;定义列表符号为图面 list-style-imgage:url();一般推荐背景图

单行文本出省略号:with:200px;white-space:nowarp;overflow:hidden;text-overflow:elliosis.

溢出属性 overflow 简写:overflow-x和overflow-y 默认值 overflow:visible;溢出隐藏:ovreflow:hidden.

元素类型

根据CSS的显示分为:块元素,行内元素,行内块元素

块元素默认情况下,从上向下排列(竖着排列),独占一行;   独占一行;  可作为其他元素的容器,但是<P>不能包自己也不能包其他块元素,h1-h6不能包自己,也不能包同类元素.    常见的块元素:div p h1-h6 ul li ol 等

行内元素:默认情况下是横着排列的,不可以支持宽度和高度,对于margin和padding的上下支持不完善,作业可以使用;对于默认横着排列的时候,可以识别空格回车为空格;对于line-height也不完善;常见的a span em ib srong sup sub 等

行内块元素:既有行内元素的特点又有块元素的特点;常见的img input等

元素转换:display属性:有18个属性,主要用的有:display:block;转化成块元素;display:inline:转化成行内元素.display:inline-block,转化成行内块元素.display:none,彻底隐藏,空间都不在.display:list-tiem,是li标签的默认属性.display:table-cell转化成表格相关,可解决IMG图片下缝隙

元素类型的分类,依据HTML的配合和CSS的显示分为置换元素(替换元素)和非置换元素....置换元素的特点:1,标签的最终显示结果需要HTML标签或者属性配合.2,这些置换元素不需要CSS设置,默认就有一定的宽高或者边框.3,比如img<img>想要最终显示出图片效果,必须配合HTML的str属性,比如input想要最终区分是哪个类型的,必须配合type属性 select想要有下拉菜单的内容,必须配合HTML的option等.