Html和CSS学习总结

时间：2022-01-23 14:15:33

Html和CSS学习总结

切图工程师

  1. 获得设计稿 （网站Dribbble、电商网站），工具PS、picpick(取色、测量)
  2. 用Html写内容
  3. CSS实现设计（难点：创造性组合）
  4. JS实现可交互性（JS+定时器+事件绑定）
  5. 动态页面 HTTP+后台

html（暂不包含HTML5）

标签和属性

  1. 按功能划分标签（嵌套关系），属性分为标签属性和全局属性
功能 常用元素
head title(*)、meta、style(仅head)、script(全局)、link、base
常用 a(绝对路径/#锚/相对路径)、img、map>area(图片区域链接)
文本格式 h1~h6、p、pre(保留空格和换行)、br、blockquote(块级)、q(行内)、div(块级)、span(行内)、strong(粗)、em(斜)、u(下划线)
列表 ul/ol、li(项)、dl、dt(项)、dd(项描述)
表格 table、caption、tr(行)、th(头)/td(项)
表单 form、input单标签(type=button/reset/submit/file、text/password/hidden、radio/checkbox[checked])、button、textarea、select>option(下拉列表)、input list>datalist>option(合法值列表)、fieldset>legend(组合)
暂未学习 框架(现在已经被div+css代替)、音视频、画布canvas、nav
  1. 其他补充
    • 乱码
      html设置浏览器解析格式charset =”UTF-8”
      html保存时有默认格式（plain文本编辑器（emeditor等）保存时的编码格式）
      如果两者不一致会造成文档乱码。
    • 转义字符(符号实体)/颜色/字符集
      html中的预留字符必须换成字符实体,才能被浏览器正确解析
      例外：
    • 图片类型
      jpg:有损，压缩比高，适合色彩丰富对质量要求不完美
      png：无损，压缩比相对高，色彩丰富，支持透明度。对色彩丰富的图片或者简单logo(有损导致质量差)更合适
      GIF：256色内的Logo（也可以用PNG，更小），唯一支持动画效果并得到广泛支持的格式
    • 表格
      合并属性：colspan(单元格横跨列数)，rowspan(单元格纵跨行数)
      边界属性：cellpadding(内容与单元格-内边距)、cellspacing(单元格间-外边距)

DIV+CSS

意义：内容（HTML）和表现（CSS）分离，便于管理和维护
网页三步曲：
1）根据内容选择标签（HTML）
2）定布局（CSS:大小，位置，框模型）
3）定样式（CSS:文本，字体，背景，链接，列表，表格，轮廓）

基础知识

选择器和优先级

  1. 选择器
选择器 符号 描述
通用选择器 * 功能
元素选择器 html标签名 功能
类选择器 .className 功能
ID选择器 #idName 功能
组合选择器 tag.className 功能
后代、儿子、相邻兄弟（一个） 空格，>, + 功能
伪类选择器： 伪元素选择器：

分类

块级元素：有宽，高，框模型等属性，独占一行
内联元素/行级元素：不独占一行，没有宽、高属性（取决内容）
行内块元素：不独占一行，但是有宽，高等属性，一般只有img和表单元素

布局

1. 宽高

  • 不指定：随内容；
  • 指定width/height：px或者%（超出父元素）
  • 网页由多个盒子（盒模型）通过不同排列方式堆积而成。盒子的实际宽高=元素的宽高（width、height）+2*（padding+border+margin）–忽略外边距合并
元素 取值 意义
width 宽度
height 高度
max-width max-height 允许的最大宽度/高度：响应式
min-width min-height 允许的最小宽度/高度：响应式

2. 盒模型

概念 属性 意义
内容 1. 块/行内块自身的宽高，不受内外边距和边框影响
内边距 padding 1. 填充，背景应用于由内容和内边距、边框组成的区域（内容区域）
2. 可以为px或百分比（相对父元素）
3. padding支持值的个数：1 2 3 4（多值空格隔开）
4. 支持padding-top/padding-right(bottom/left)
边框 border 1. border支持值的个数：1 2 3 4（多值空格隔开）
2. 支持border-top/border-right(bottom/left)
3. border-width:1）指定长度值，比如 2px 或 0.1em；2）关键字thin 、medium（默认值） 和 thick
4. border-style:11种:dotted(点)，dashed(虚线)，solid(实线)，double(双实线)；groove(3D凹槽)，ridge (3D凸)，inset(3D)，outset(3D)；none(无边框)，hidden(表的边框冲突)，inhert
5. border-color:命名颜色（transparent），16进制或者RGB
6. border由宽度，风格，颜色三个属性构成，每种属性都支持多个值。
7. 边框绘制在“元素的背景之上”，元素的背景应当出现在“间断性”边框的可见部分之间。
外边距 margin 1. 外布局重叠，设置外边距为负值
2. 像素px、英寸in、毫米、 em和%（相对父元素）
3. margin支持值的个数：1 2 3 4（多值空格隔开）
4. 支持margin-top/margin-right(bottom/left)

  • padding/border/margin取值：

    1. 1个值：上下左右
    2. 2个值：上下，左右
    3. 三个值：上，左右，下
    4. 四个值：上，右，下，左（顺时针）

  • 外边距合并
    当两个垂直外边距相遇时，它们将形成一个外边距。
    合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。
    仅适用于普通文档流的块级框，不适用行内框，浮动定位和绝对定位
    1）两个盒模型垂直：两者间距等于外边距较大者
    2）盒模型内嵌：父元素没有大小（仅有外边距），子元素有大小和外边距。父元素的盒模型大小为子元素大小+外边距较大者*2（忽略padding和border）
    3）自身合并：内容区域（内容为空，无内边距和边框）为空，上下边距会合并，且如果遇到其他元素的外边距继续发生合并
    备注：是段落间实际只有一个段落间距，因为发生了合并

  • 常用效果
    1)全局盒模型边距重设
    *{
    margin : 0;
    padding:0
    }
    2) 块级居中
    margin ： 0 auto；
    备注：除非已经声明了 !DOCTYPE，否则使用 margin:auto 在 IE8 以及更早的版本中是无效的

3. 定位

CSS三种定位流：普通文档流，浮动和绝对定位
普通文档流：块级框从上到下垂直排列（外边距和外边距合并），行级框水平排列且自动换行（高度取决内容和行高line-height，不包括内外边距和边框的值）

属性 意义 取值
display 文档流中”一切皆为框”，可以改变框的类型
块级元素-块框，行级元素-行内框，无框（不存在） 		1. inline:显示为行级元素
2. block:显示为块级元素
3. inline-block:显示为行内块元素
4. none:元素隐藏，不占用文档流visibility
5. 列表、表格等
overflow 1. 内容溢出元素框处理。
2. 内容超出框的长宽；
子元素宽高超出父元素
 1. hidden:裁剪，隐藏溢出元素
2. visible:不裁剪，溢出元素框显示
3. auto:当内容被裁剪时出现滚动条
4. scroll:滚动机制
float 1. 脱离文档流，但是文档流的行内元素可识别（环绕效果）。
2. 一切元素都可浮动。（隐意： display=block）（盒模型）
3. 运动和停止(遇到其他float元素、遇到父元素边界)
 1. left:向左浮动
2. right:向右浮动
3. none:取消浮动
clear 元素的哪边上不允许出现浮动元素 left、right、both(左右)，none
positive 定位，一切元素都可定位。绝对或固定元素会生成一个块级框 1. relative:相对自身原始位置定位，元素仍然占据原来的空间。因此，移动元素会导致它覆盖其它框。left/rigth/top/bottom
2. fix:固定定位，相对于浏览器窗口进行定位。left/rigth/top/bottom
3. absolute: 1）相对“有定位”属性的父元素（一般用relative添加父元素定位属性）
2.）脱离文档流,覆盖但不影响普通文档流
z-index 仅作用于定位元素，规定元素层叠顺序 可正可负，值越大离用户越大
visibility 框是否显示，仍占原有空间 1. visible:框可见
2. hidden:框不可见
3. collapse:当在表格元素中使用时，此值可删除一行或一列，但是它不会影响表格的布局。被行或列占据的空间会留给其他内容使用
    *

4.常见布局

  • 导航栏
  • 网格布局
    overflow = hidden。
    • *

样式

样式 属性
背景 backgroud-color:RGB/#rrggbb/颜色名
backgroud-image:url(); 背景图片
backgroud-repeat:repeat/repeat-x/repeat-y/no-repeat; 背景图片重复
backgroud-position:x轴 y轴；背景图片的起始位置（x,y）。三种取值类型：关键字成对出现，出现一个默认另一个为center（top/rignt/center…）;%；px
backgroud-attachment:fixed/scroll; 是否随内容滚动。默认scroll.
文本 text-indent (缩进 em/%)，text-align(文本对齐 center/left/right/justify)，letter-spacing(字母之间的标准间隔 em/px)，word-spacing，line-height(字行高)，text-decoration（文本修饰 none/underline/overline/line-through/blink）
字体 font-family，font-size(相对值：em、%/绝对值：px)，font-weight(100~900或关键字normal=400 bold=700)，font-style(normal/italic/oblique 正常/斜体)
列表 list-style，list-style-type(列表项标记的类型 none/disc等)、list-style-image:url();(列表项标记的图片)，list-style-position(列表项标记的位置 inside/outside)
链接 a:link(未点击)，a:visited(已点击)，a:hover(鼠标位于链接上)，a:active(链接正被点击)

其他

  1. 网站兼容性、性能、搜索引擎友好
    1）盒模型：IE5/6 width 属性不是内容的宽度，而是内容、内边距和边框的宽度的总和
    2)font-family
    3)font-size:
    IE不支持px，W3C推进em、%；1em 等于当前的字体尺寸；IE中em的显示并不理想，所以%更合适

  2. 引入方式（4种）
    行内样式：标签的属性style=”attr:value;”，
    嵌入样式：<style>
    引入样式：<link>
    导入样式：@import url

  3. 元素
    cursor,对齐（text-align/vertical-align）,opacity图片透明度
标签：

相关文章