css布局属性有哪些 css属性大全
大家好，今天给各位分享css布局属性有哪些的一些知识，其中也会对css属性大全进行解释，文章篇幅可能偏长，如果能碰巧解决你现在面临的问题，别忘了关注本站，现在就马上开始吧！
DIV+CSS布局常用的属性
用过DIV+CSS的人都知道，虽然这种布局没有用传统的table直观，但用习惯了就会感觉出DIV+CSS的优越。对于seo优化，div+css也有了明显的优势，实际应用中我搜索了DIV+CSS的常用定义项，并对其参数作了归纳和说明，与喜欢DIV+CSS的朋友共享。通用类
overflow:hidden;自动隐藏超出的内容，防止撑开层和表格的范围
!important
指定样式规则的应用优先权：
文字类
color:#FF0000;文字颜色
font-family:"Arial","Helvetica","sans-serif";字体
font-size: 9px;字号
text-align：center;居中(left为居左,right为居右)
line-height：28px；行高(可用150%值)
font-style: italic;斜体(oblique偏斜体)
font-weight: bold;服务粗体(bolder特粗，400粗值)
font-variant: small-caps;小型大写字母
text-transform: capitalize;首字母大写
text-decoration: underline overline line-through blink;下划线，上划线，删除线，闪烁
text-indent: 2em;文字缩进2个字体高(或15px,即15象素)
背景类
background-attachment: fixed;固定位置(scroll滚动)
background:#0066CC;背景色(transparent透明)
background: url(/image/more2.gif);背景图片
background-repeat: repeat;重复(repeat-x横向重复，repeat-y纵向重复)
background-position: center top;水平居中垂直顶部(left center水平居左垂直居中)
background：url(/image/dtbg.gif)#FEFEFE no-repeat right bottom(2px 5px);背景图片、背景颜色、图片不重复、背景图片从右下角开始(图片距左2px距上5px)
框架位置类
clear: both;两边拒排浮动对象(left左边拒排浮动对象,right右边拒排浮动对象)
float: left;浮动对象位置居左(right,最新列车时刻表位置居右)
position：relative;相对位置，一般在上级框架中设定极品时刻表
position：absolute;绝对位置，配合上级框架的设定对本级框架设定，设置top、left值
top：5px;页面绝对或相对于框架顶端绝对位置
left：10px;页面绝对或相对于框架左边绝对位置
width: 100px;宽100px
height: 200px;高200px(可用auto和100%值)
margin上海火车时刻表：10px 20px 10px 20px；
上右下左页边距(值相同可省写margin:10px)
单独指定用margin-top：10px;(margin-right、margin-bottom、margin-left)
padding：20px 10px 10px 20p；
上右下左内容离边框的距离(值相同可省写padding:10px)
单独指定用padding-top：10px;(padding-right、padding-bottompadding-left)
border：#ccc 1px solid成都列车时刻表；
四边框颜色、线宽、实线(dotted虚线,dashed点画线,double双线,ridge脊线)
单独指定用border-top：#ccc 1px solid；border-right：#ccc 1px solid
等等
项目列表类 list-style-position: outside;位置为外(inside内) list-style-image: url(/yh/image/more04.gif);项目符号图像临客时刻表 list-style-type: disc;项目符号为圆点(circle圆圈,square方块)
扩展类 cursor: e-resize;鼠标样式 filter: Blur(Add=4, Direction=8, Strength=4);滤镜 filter: FlipH;横向翻转(FlipV gprs流量费纵向翻转)
单独设置链接
#bottool a:link{color:#fff};未访问的颜色
#bottool a:visited{color:#fff};已访问的颜色流量软件
#bottool a:hover{color:#ff0};鼠标在链接上
这么多定义项,其实常用也就下面几类:指定宽高值width,height;指定背景:background;指定位置:float,特殊的用position结合 top、left来定位；设定框架边距：margin；设定容器内框距：padding几项。其中在我的样式定义中取消了overflow、 clear、!important程序的定义项。
1、取消overflow:hidden是因为经反复实验，该定义项只能隐藏超出容器高度的内容而不能隐藏超出宽度的内容。而我需要的就是要能自动隐藏超出容器宽度的内容，有时反而需要容器高度能随内容的多少而撑开容器高度。
2、取消clear定义项是因为在实际应用中很真正达到理解的容器与容器的排列关系，框架或容器的位置还是用float、position、top、left等精确定位。
3、!important
指定样式规则的应用优先权。这个主要用于在IE和其它的浏览器要区别显示出的效果，我的网站就是想固定显示效果，所以不存在什么优先权。
我对DIV+CSS也还在研究之中，有不当之处请大家跟贴指正，有完善的地方也请跟贴完善。我认为用DIV+CSS来布局网站，最重要的是布局思路问题，不同的设计方案，设计的繁简大不一样。我着重框架或容器的通用性，设计出几种容器的样式，就象FS4中的标签样式，然后在需要的地方调用这个样式就行了，以达到通用性而不是专用性。、希望可以帮到你
CSS布局有哪几种类型
五种基本布局定位类型:*弹性布局-总体宽度及其中所有栏的值都以 em单位编写。这应使布局能够使用浏览器的指定基本字体大小缩放。对于视力不好的用户,这可能更有吸引力、更易于访问,因为栏宽度将变得更宽,能以任何大小显示更舒适、更可读的行长度。由于总体宽度将缩放,您的设计必须允许可这宽度。*固定布局-总体宽度及其中所有栏的值都以像素单位编写。布局位于用户浏览器的中心。*流体布局-总体宽度及其中所有栏的值都以百分比编写。百分比通过用户浏览器窗口的大小计算。*混合布局-混合布局组合两种其他类型的布局-弹性和流体。页面的总宽度为 100%,但侧栏值设置为 em单位。*绝对定位布局-所有前述布局的外栏使用浮动内容。而绝对定位布局完全如其名所示-有绝对定位的外栏。必须记住,当使用这些布局时,侧栏会“提出文档流程”,因而可能有一些不合适的结果(例如,页脚可能“看不见”在侧栏在何处结束并在主要内容区域包含的内容少于侧栏的页面与页脚重叠)。
css 布局常用属性
CSS布局常用属性主要包括 display、position和 float，它们在控制元素显示方式、定位机制和浮动行为方面起着关键作用。以下是对这些属性的详细归纳：
1. display属性display属性定义了元素生成的显示框类型，常见的属性值包括：
block：元素显示为块级元素，会独占一行，可以设置宽高、内边距、外边距等盒模型属性。如 div标签的默认 display属性就是 block。inline：元素显示为行内元素，不会独占一行，只会占领自身宽高所需要的空间。给行内元素设置宽高不会起作用，margin值只对左右起作用，padding值也只对左右起作用。如 span标签的默认 display属性就是 inline。inline-block：元素既具有块级元素可以设置宽高的特性，又具有行内元素不换行的特性。inherit：元素从父元素继承 display属性值。none：元素不显示，也不占用空间位置。flex：用于 flex布局，但在此不详细展开。2. position属性position属性用于定义元素的定位机制，常见的属性值包括：
static：默认值，元素正常出现在文档流中，top、right、down、left无效，可以设置 margin来移动。relative：相对定位，相对于元素的正常位置进行定位，不脱离文档流，top、right、down、left可能会遮挡附近元素，一般使用 margin来移动。absolute：绝对定位，相对于除 static定位以外的元素进行定位，会一直往上查找，直到找到非 static定位的元素或者浏览器窗口进行定位，脱离文档流，一般用 top、right、down、left来移动，也可以设置 margin。fixed：固定定位，相对于浏览器窗口进行定位，常用于实现网站中的固定 header和 footer。3. float属性float属性定义元素在哪个方向浮动，常用属性值有 left和 right，即向左浮动和向右浮动。设置了 float的元素会脱离文档流，然后向左或向右移动，直到碰到父容器的边界或者碰到另一个浮动元素。块级元素会忽略 float元素，文本和行内元素却会环绕它。
当子元素设置浮动属性后，可能会导致父元素的高度塌陷，即父元素的宽高不会被子元素的内容撑开。解决这个问题的方法包括使用 after伪元素法或 overflow法来清除浮动。
总结CSS布局常用属性 display、position和 float在控制元素显示方式、定位机制和浮动行为方面起着关键作用。通过合理运用这些属性，可以实现各种复杂的页面布局效果。
好了，文章到此结束，希望可以帮助到大家。