首页 > 代码库 > CSS基础和布局复习

CSS基础和布局复习

2024-07-22 14:43:13   220人阅读

table布局div布局优势
 浏览器支持完善
 表现和结构分离
 样式设计控制功能强大
 可以继承,层叠处理
Transitional // 松散过度型
Strict //严格型
Frameset //比较不常用的，使用框架使用这种模式
XHTML中的所有标签都是要闭合的比如 "<input/>"
但是在HTML中就不必这样 "<input>"即可 

CSS中的数据单位:
px : 像素
em : 当前对象体内的字体尺寸（好像英文比较常用这个尺寸）
ex : 当前字符高度的相对尺寸 ( font-size:1.2ex,当前字符的1.2倍高)
pt : 点/镑point (font-size:9pt;)
pc : 派卡 pica
in : 英寸
pc : 派卡 pica
mm ： 毫米
cm ：厘米
rgb ： （0，0，0）
rgba：（0，0，0，0.2）
rrggbb ：十六进制的颜色单位 #ffffff;
colorName ： 字体颜色(color:blue) 

样式分有三种 ：
  1. 行间样式
  2. 内部样式
  3. 外部样式

css布局和定位:

1:一列自适应: width:80%;

    <h5>一列固定居中: margin:0 auto;</h5>    <h5>二列固定宽度:</h5>    <div id="two-row" class="clearFix">    	<style>			.clearFix:after{				content:"";				display:block;				visibility:visible;				clear:both;				height:0;			}        	#two-row {				width:500px;				background:#666			}        	#two-row .left{				width:200px;				background:#0C9;				float:left;			}        	#two-row .right{				width:300px;				background:#069;				float:left;			}        </style>    	<div class="left">row1</div>    	<div class="right">row2</div>    </div>

　　

2:两列宽度自适应：利用左右定位；中间居中

    <div id="two-auto" class="clearFix">        <style>            .clearFix:after{                content:"";                display:block;                visibility:visible;                clear:both;                height:0;            }            #two-auto {                background:#666            }            #two-auto .left{                width:35%;                background:#0C9;                float:left;            }            #two-auto .right{                width:30%;                background:#069;                float:left;            }        </style>        <div class="left">auto-left</div>        <div class="right">auto-right</div>    </div>
    
3:两列右列宽度自适应


<div id="right-auto">    <style>           #right-auto{        }        #right-auto .left{            width:100px;            float:left;            background:#ccc;        }        #right-auto .right{            background:#f00;            border:2px solid #000;        }    </style>        <div class="left">left</div>        <div class="right">right</div>    </div>
    <h5>三列自适应</h5>    <div id="three">        <style>        #three{            position:relative;        }        #three .left{            position:absolute;            left:0;top:0;            width:100px;            height:300px;            background:#C99;        }        #three .right{            position:absolute;            top:0;right:0;            width:100px;            height:300px;            background:#C99;        }        #three .center{            margin-left:100px;            margin-right:100px;            height:300px;            background:#F03;        }        </style>        <div class="left">left</div>        <div class="right">right</div>        <div class="center">center</div>    </div>
    <h5>三列自适应;利用左右浮动；中间居中</h5>    <div id="three-1">        <style>        #three-1{            position:relative;        }        #three-1 .left{            float:left;            width:100px;            height:300px;            background:#C99;        }        #three-1 .right{            float:right;            width:100px;            height:300px;            background:#C99;        }        #three-1 .center{            margin-left:100px;            margin-right:100px;            height:300px;            background:#F03;        }        </style>        <div class="left">left</div>        <div class="right">right</div>        <div class="center">center</div>    </div>

 

高度自适应:

高度自适应这个必须设置 html,body{height:100%} 因为ff和ie中html，和body的高度是不同的，这么写是处理兼容问题; ff,chrome{html为当前视区大小,要把html100%的高度，body为内部内容高度，滚动出现在html中} ie{html为隐藏的好像；body为内部内容的高度，滚动是出现在body中的}
 
盒模型； 主要是IE和IE6的怪异模式‘
box-sizing:border-box; box-sizing:content-box; box-sizing:padding-box;
margin叠加和margin双倍解决
for example:
background
background-image; background-color: background-repeat; background-attachment:设置背景图的滚动方式，背景会被固定住,不会随着scroll改变; background-position: 左对齐方式 ，右对齐方式；
超出div的内容区域
//要换行最好都加，这样可以处理英文和中文 word-break:break-all;允许词间换行； word-wrap:break-word超过容器就换行 white-space:no-wrap;超过容器不换行;
img标签的clip剪切css
这个东西不常用； img{ position:absolute; clip:rect(1px 2px 3px 4px) }

CSS基础和布局复习


联系
我们