html项目中css的位置,CSS项目中常用布局

正文

HTML基本标签

双标签

自封闭标签：img hr

CSS文本样式

font-maily 字体

font-size 字号 small 14px

font-weight 字粗细 bold(加粗)normal(不加粗 常归)lighter(更细)100~700

font-style:normal(常归/默认) 斜体 italic oblique

color: 文字颜色 可以写英文 也可以是色号#0000 #ffffff

line-height:行间距 单行字占的高度

可以用来做单行内容的垂直居中

text-align:对齐方式 left center right ;

text-indent:缩进 首行进行缩进2em

特殊应用 改变文本的位置

文字间距

word-spacing 单词与单词之间的距离

letter-spacing 字母与字线之间的距离 汉字之间的间距用这个属性

white-space 文档中 空白处

normal 默认情况 敲多个空格 也只显示一个

pre 会保留空格

nowrap 不允许换行

特殊应用与overflow：hidden 与 text-overflow:ellipsis;

搭配使用 实现单行文本的缩略显示

text-decoration:文字修饰 underline下划线 overline上划线

line-through 删除线 none没有任何修饰

word-break:break-all 强制换行

word-break 以单词换行 默认

display

displsy:元素的形式

block将内联元素转化成块元素

inline-block 内联块元素 可以写宽高但是不独占一行

inline 可以将一个块元素转化成内联元素

span{

display: inline-block;

vertical-align: top;

width: 80px;

height: 80px;

background: blue;

font-size: 40px;

text-align: center;

}

span small{

display: block;

font-size: 12px;

}

div{

display: inline;

}

022019-03

新闻标题

aaa

aaa

效果如下：

img1.png

ul>li{

margin:10px;

display: inline-block;

width: 60px;

height: 30px;

line-height: 30px;

background: #1e90ff;

color:#fff;

text-align: center;

}

• 项目1
• 项目2
• 项目3
• 项目4

效果如下：

img2.png

table 将元素展示为表格形貌

table-cell 将元素展示为单元格形式

特殊的用法

.order-box>ul{

display: table;

}

.order-box>ul>li{

width: 120px;

display: table-cell;

vertical-align: middle;

height: 100px;

}

.order-box>ul>li>img{

width: 100px;

}

• 商品名称
• 商品价格
• 订单状态

效果如下：

img3.png

none:

width

height

border

标准的盒模型width = width + margin + padding + border

css3盒模型 width = width + margin

.box-group{

width: 100%;

overflow: hidden;

background: #008000;

float:left;

margin-bottom:100px;

}

.box-item{

float:left;

width:22.5%;

height: 200px;

margin-left:2%;

background:#adff2f

}

效果如下：

img4.png

目前常用的是CSS3的盒模型，如果项目要求兼容IE8要用标准盒模型

Float 浮动

float:left right

使用此属性的元素/标签将变为内联块

将脱离文档流 影响父节点的高度

将影响下一行要表现的内容

解决浮动的影响；

1、父节点写高度

2、在下一行的内容的父节点上加clear:both清除浮动

3、在浮动元素的父节点上加上一个overflow:hidden，并且

不能写高度 如果想加 默认高 可以写min-height

.list{

background:grey;

overflow: hidden;

margin-top: 10px;

}

.box{

margin-right: 5px;

width: 100px;

height: 100px;

background: #adff2f;

}

.left{

float: left;

}

.right{

float: right;

}

.ditem{

display: inline-block;

}

效果如下：

img5.png

homework:

homework1

div,img,h1,p,button{

margin:0;

padding:0;

}

.list_box{

height: 200px;

}

.list_box>.left{

float: left;

width: 20%;

}

.list_box>.middle{

float: left;

width: 60%;

}

.list_box>.middle>p{

margin-top: 20px;

}

.list_box>.right{

float: left;

width: 20%;

line-height: 200px;

}

商品标题

Lorem ipsum dolor sit amet,

consectetur adipisicing elit.

Adipisci alias amet assumenda

beatae debitis delectus dicta eligendi fugiat

in ipsam nam nobis numquam pariatur quia quo

rem, ut veniam voluptate?

加入购物车

商品标题

Lorem ipsum dolor sit amet,

consectetur adipisicing elit.

Adipisci alias amet assumenda

beatae debitis delectus dicta eligendi fugiat

in ipsam nam nobis numquam pariatur quia quo

rem, ut veniam voluptate?

加入购物车

商品标题

Lorem ipsum dolor sit amet,

consectetur adipisicing elit.

Adipisci alias amet assumenda

beatae debitis delectus dicta eligendi fugiat

in ipsam nam nobis numquam pariatur quia quo

rem, ut veniam voluptate?

加入购物车

效果如下：

img6.png

以上就是我关于 CSS项目中常用布局 知识点整理与总结的全部内容，希望对你有帮助。。。。。。。

==================================================================

分割线