7.27 行内元素和块状元素 * 精灵图

# CSS回顾
### CSS的使用
* 元素的style属性内
* style标签内
* link引入外部的css文件 `<link rel="stylesheet" href="">`
* @import url("");  写在css中

### CSS的基本语法
    
    选择器{
        属性:属性值;
    }

### CSS注释
`/*注释*/`

### CSS的长度单位
* px
* em  
* 百分比
* 绝对单位  cm  mm  pt

### CSS的颜色表示
* 英文单词
* rgb方式
* 16进制

### CSS选择器
* ID选择器
* CLASS选择器
* 元素选择器
* 全局选择器  *
* 组合-- 后代    selecter selecter
* 组合--子元素   selecter>selecter
* 组合--多条件   p.item
* 伪类
    * :link
    * :visited
    * :hover
    * :active

### 选择器优先级

# CSS的属性
### CSS字体属性
* font-family      sans-serif/serif
* font-size
* font-weight    normal/bold/bolder/lighter/数字
* font-style    normal/italic/oblique
* font-variant: normal/small-caps
* font   `font:[weight/style/variant] size family`

### CSS颜色属性
* color

### CSS文本属性
* letter-spacing   字母间距  默认0px
* word-spacing    单词间距  默认 0px
* text-decoration   值: none/underline/overline/line-through
* text-align    水平对齐方式   left(默认)/right/center
* vertical-align  垂直对齐(基于文字的基线)  baseline/bottom/top/middle/sub/super/text-top/text-bottom/百分比
* text-indent   首行缩进  长度单位
* line-height:  行高  长度单位  设置行高=高 使一行文字垂直居中
* `font:[style/variant/weight] size/line-height family`

### CSS背景属性
* background-color  背景颜色
* background-iamge  背景图片 url()
* background-repeat  背景图片的平铺方式  repeat(默认)/repeat-x/repeat-y/no-repeat
* background-postion  背景图片定位  left/center/right/长度单位  top/center/bottom/长度单位
* background-attachment   背景图片固定或滚动   scroll(默认)/fixed
* `background:color image repeat postion`

### CSS边框属性
* border-width   边框线的宽度 长度单位
* border-color
* border-style   边框线的风格   solid 实线/dotted点线/dashed虚线/double双线 inset 3D凹边...
* border   `border:width style color`
* border-left/right/top/bottom

### CSS鼠标光标属性
* cursor   值  default/pointer/move/crosshair/text/wait

### CSS列表属性
* list-style-type  列表项的图形  disc/circle/square/decimal/lower-roman/upper-roman ....
* list-style-postion   列表项图形的位置   outside/inside
* list-style-iamge    自定义列表图形  url
* 最常见的设置  `list-style:none`

### CSS表格属性
* table-layout   表格布局方式  auto/fixed
* border-collapse  合并单元格边框   separate/collapse
* border-spacing  单元格间距  长度单位
* caption-side     表格标题位置  top/bottom
* empty-cells     没有内容的单元格是否隐藏    show/hide

### CSS sprites css精灵图

# DIV+CSS布局
### 行内元素和块状元素呢
* 块状元素独占一行, 行内元素可以共用一行
* 默认宽度:  块状元素默认宽度由父元素决定  行内元素默认宽度右内容决定
* 块状元素可以设置宽高, 行内元素不可以设置宽高
* 大部分块状元素内部可以嵌套块状或行内, 大部分行内只能嵌套行内
* 外边距,块状没问题,行内只能设置左右

padding 内间距 margin 外间距

时间: 2024-10-12 11:57:38

7.27 行内元素和块状元素 * 精灵图的相关文章

行内元素和块状元素有些?

1关于行内元素和块状元素的说明 根据CSS规范的规定,每一个网页元素都有一个display属性,用于确定该元素的类型,每一个元素都有默认的display属性值,比如div元素,它的默认display属性值为"block",成为"块级"元素(block-level):而span元素的默认display属性值为"inline",称为"行内"元素.div这样的块级元素,就会自动占据一定矩形空间,可以通过设置高度.宽度.内外边距等属性

HTML的display属性将行内元素、块状元素、行内块状元素互相转换以及三者的区别

1.行内元素 (1)设置宽高无效 (2)对margin仅设置左右方向有效,上下无效:padding设置上下左右都有效,即会撑大空间 (3)不会自动进行换行 <html> <head> <meta charset="utf-8" /> <title>行内元素</title> <style type="text/css"> span { width: 120px; /*设置宽高无效*/ height

html之内联元素与块状元素

一.html之内联元素与块状元素 1.块状元素一般比较霸道,它排斥与其他元素位于同一行内.比如div,并且width与height对它起作用. 2.内联元素只能容纳文本或者其他内联元素,它允许与其他内联元素位于同一行内.比如span.但是,width与height对它不起作用. 3.当然,块状元素与内联元素是可以相互装换的.给块状元素设置display:inline;或者给内联元素设置display:block:即可装换. 4.所有块状元素: address – 地址  blockquote –

HTML--内联元素和块状元素--大全

a{color:#fff; background:#F93;width:100px;height:50px;/*内联元素的宽度高度不起作用--> <!--加了这个转换才有作用--><!--将内联元素转换为块元素*/ display: block;} 没有加  display: block; 之前 width:100px;height:50px; 将对 a不起作用 总结:既是a标签为内联元素,直接设置它的 width和height将不起作用,需要将内联元素转换为 [块状元素]方可对 

行内元素和块状元素的区别

类别 是否独占一行 能否设置宽高 能否设置margin padding border 块状元素 是 能 可以 行内元素 不是 不能 不能设置margin padding 但能设置border

HTML行内元素、块状元素以及空(void)元素

块状元素:                                                                                             address - 地址                                                                                                                                blockquote -

html行内元素 和 块状元素 总结

块状元素 address - 地址blockquote - 块引用center - 举中对齐块dir - 目录列表div - 常用块级容易,也是CSS layout的主要标签dl - 定义列表fieldset - form控制组form - 交互表单h1 - 大标题h2 - 副标题h3 - 3级标题h4 - 4级标题h5 - 5级标题h6 - 6级标题hr - 水平分隔线isindex - input promptmenu - 菜单列表noframes - frames可选内容,(对于不支持fr

img、input到底是行内还是块级元素?

一.img.input属于行内替换元素.height/width/padding/margin均可用.效果等于块元素.      行内非替换元素,例如, height/width/padding top.bottom/margin top.bottom均无效果.只能用padding left.right和margin left.right改变宽度. 二.在文档类型定义(DTD)中对不同的元素规定了不同的类型,这也是DTD对文档之所以重要的原因之一. 从元素本身的特点来讲,可以分为不可替换元素和替

内敛元素和块状元素

一.块元素 块元素(block element)一般是其他元素的容器元素,块元素一般是从新行开始,它可以容纳内联元素和其他块元素,常见块元素是段落标签“P”.“form” 这个块元素比较特殊,它只能用来容纳其他块元素. 如果没有css的作用,块元素会顺序以每次另起一行的方式一直往下排.而有了css以后,我们可以改变这种html的默认布局模式,把块元素摆到你想要的位置上去,而不是每次都愚蠢的另起一行.需要指出的是:table 标签也是块元素的一种,table based layout 和css b