随笔分类 - HTML和CSS
摘要：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> html, body { margin: 0; padding: 0; wid
阅读全文
摘要：第一种方法：绝对定位 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> html, body { margin: 0; widt
阅读全文
摘要：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> #container { width: 400px; } #target {
阅读全文
摘要：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> html, body { height: 100%; } body { wid
阅读全文
摘要：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> #triangle { width: 0; height: 0; border
阅读全文
摘要：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> table tr:nth-child(even)>td { backgroun
阅读全文
摘要：meta，元数据 不显示 为浏览器提供描述信息，包括： 网页的描述 关键词 作者 修改时间等 <meta name="keywords" content="HTML,ASP,PHP,SQL"> 设定meta的主要用处： 设定字符集 SEO优化 设定viewport
阅读全文
摘要：语法： E:after 或者E::after, 后者是CSS3中的写法，建议使用前者 用于设置E对象在其最后部（相当于last child）发生的内容 使用以下样式： content：内容 display：显示样式 其他样式，如height等
阅读全文
摘要：包含块：containing block, CSS2.1中的概念 一个元素盒子的位置和尺寸需要根据一个确定的矩形进行计算，确定这个矩形的元素称为包含块。 确定包含块的规则： html根元素包含块，也称为初始包含块，是viewport的大小 position: relative\static的元素，最
阅读全文
摘要：有一种可能，同时写了四种伪类，:link, :visited, :hover, :active, 一旦链接被点击过，并且又把:visited写在最后，CSS的选择器优先级一样，定义在后的覆盖定义在先的，造成:hover无法生效 解决方法： 按照:link, :visited, :hover, :ac
阅读全文
摘要：BFC，块格式化上下文（Block Formatting Context）。W3C CSS2.1中的一个概念。 FC：它是一块渲染区域，遵守相应的渲染规则，这些规则决定了： 内部元素的定位方式 与外部元素的位置关系 BFC的布局渲染规则： 内部的Box会在垂直方向，一个接一个地放置。 Box垂直方向
阅读全文
摘要：W3C标准盒子模型： 包括：内容（width，height），padding，border，margin 盒子的可视宽度为：width + padding + border 标准盒子模型： IE盒子模型： 包括：内容，padding，border，margin 盒子的可视宽度为：width 盒子的内
阅读全文
摘要：CSS link： link是html标签 加载页面的过程是异步的，不会阻塞浏览器的解析过程 举例 html文件： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <link
阅读全文
摘要：display:none; 元素从Render tree上被拿下 不参与layout过程，其宽度和高度不会影响渲染 visibility：hidden; 元素还在Render tree上 参与layout过程，宽度和高度影响渲染，但是内容透明 把元素的宽度或者高度设置为0 幻灯片等使用情况下，通过z
阅读全文
摘要：高度或者宽度的单位 px：像素，绝对长度单位 em：相对长度单位，表示相对当前元素font-size的倍数 例如：font-size：16px；2em = 16 * 2px = 32px rem：root em，相对长度单位，表示相对html根元素font-size的倍数 %： width：基准是父
阅读全文
浙公网安备 33010602011771号