CSS基础3
--css列表
导航条、文章列表使用
-
- list-style 一条声明设置所有属性
- list-style-image 图像设置为列表项标记
- list-style-position 标记的放置位
- list-style-type 列表项标记的类型
>list-style-type:
disc 默认,实心圆
cilcle 空心园 square 实心方体
decmial 数字 decimal-leading-zero 0开头数字(01,02.....)
lower-roman 小写罗马数字 upper-roman 大写罗马数字
lower-alpha 小写英文字母 upper-alpha 大写英文字母
>list-style-image
url(位置)
>list-style-position:
inside 放在文本以内,环绕文本根据标记对齐。
outside 默认值,文本左侧,放在文本外,不根据标记对齐
inherit
>list-style:
格式:list-style: list-style-type: list-style-position: list-style-image:
css队列设置很少,,列表设置主要综合使用css其他声明进行设置。
用<ul>创建一个导航菜单
<!--方案-->
li{
float:left;
width:100px;
background-color:
text-align:center;
}
<!--方案二-->
li{
display:inline-block;
width:100px;
background-color:
text-align:center;
}
>css表格
birder-collapse:collapse 合并单元格 tr才会有边框
border-spacing:水平 垂直 单元格边框之间的距离
caption-side:button 标题下面
empty-clls:
table-layout:fixed 表格布局算法
>css轮廓和框模型 border(边框) marging(外边距)(0 0 0 0);padding(内边距)(0 0 0 0);
边框和轮廓同:存在于元素周围
颜色、类型、宽度设置
默认为不显示
不同:边框布局、轮廓参与布局
轮廓边框外
border:_px _px _px _px;
border-radius:_px _px _px _px;
box-shadow:_px _px _px _px;
>outline-style: 轮廓样式
none 默认无 double 双线
dotted 点状 grovave 3D凹槽轮
doshed 虚线 ridge 3D凸槽轮
solid 实线 inset 3D凹边
outset 3D凸边
>css框模型
(Box Model)规定了元素处理元素的内容、内边距、边框和外边距的方式。
>css边框
围绕元素内容和内边距的一条或多条线
属性border,设置边框的样式、宽度和颜色。
方法一:
border-color:_ _ _ _
border-width:_ _ _ _
border-style:_ _ _ _
方法二:各条单独设置
border-top-color(上边框颜色)
border-top-style( 样式)
border-top-width( 宽度)
方法三:
border-width:-top -right -bottom -left
border-style:
border-color:
>css圆角边框
一条命令中对左上、右上、右下、左下四个角进行设置
border-radius:top-left top-right bottom-right bottom-left
分别设置:
border-top-left-radius:
border-top-right-radius:
border-bottom-right-radius:
border-bottom-left-radius:
分别设置可设置每个角的纵横弧度值。
>css盒子阴影
box-shadow:h-shadow v-shadow blur suread color inset
h-shadow必须水平阴影,允许负值
v-shadow必须垂直阴影,允许负值
biur 可选 模糊距离
spread 可选 阴影的尺寸
color 可选 阴影的颜色
inset 可选 外部阴影(outset)改为内部阴影
>css盒子旋转
属性:transform 旋转
应用2D或3D转换。该属性允许元素旋转、缩放、移动或倾斜。
语法:transform:rotate(_deg)
>css定位:
块级元素:(前后都有换行符)<div> <h1>~<h6> <p> <form> <ul> <ol> <hr> <table>等
行内元素:<a> <em> <strong> <img> <br> <input>
(内联元素)<label> <span> <textarea> <select>等
属性 display改变生成框的类型。
将属性设置为block:让行内元素像块级元素
display:none让元素设置为没有框 该框及所有内容就不在显示,不占空间
none 此元素不会被显示
block 块级元素,前后带有换行符
inline 内联元素,前后没有换行符
inline-block 行内块元素
table-cell 作为一个表格单元格显示
三种定位机制:普通流、浮动和绝对定位
使用position属性:4种不同定位
static 框正常生成,块级生成矩形框,行内创建一个或多个框,置于父元素中
布局:
position(定位):值 relative(相对) absolute(绝对) fixed(固定) top(上) bottom(下) left(左) right(右)
浮动:
float:left right
cleat:left right both