扁蛋蛋蛋的博客

元素的显示与隐藏 类似网站广告, 当我们点击关闭就不见了, 但是我们重新刷新页面, 会重新出现 本质: 让一个元素在页面中隐藏或者显示出来 1. display显示隐藏 display属性用于设置一个元素应如何显示 display: none; 隐藏对象 display: block; 除了转换为块级元素之外, 同时还有显示元素的意思 display隐藏元素后, 不再占有原来的位置 应用极为广泛, 搭配js可以做很多网页特效 2. visibility显示隐藏 visibility属性用于指定一个

定位 为什么需要定位? 提问: 以下情况使用标准流或者浮动能实现吗? 某个元素可以自由的在一个盒子内移动位置, 并且压住其他盒子 当我们滚动窗口时, 盒子是固定在屏幕某个位置的 以上效果, 标准流或浮动都无法快速实现, 此时需要定位来实现 所以: 浮动可以让多个块级盒子一行没有缝隙排列显示, 经常用于横向排列盒子 定位则是可以让盒子自由的在某个盒子内移动位置或者固定在屏幕中某个位置, 并且可以压住其他盒子 定位组成 定位: 将盒子定在某一个位置. 所以定位也是在摆盒子, 按照定位的方式移动盒子 定

浮动 传统网页布局的三种方式 CSS提供了三种传统布局方式(简单说, 就是盒子如何进行排列顺序) 普通流(标准流/文档流) 所谓的标准流: 就是标签按照规定好默认方式排列 块级元素会独占一行, 从上往下顺序排列 常用元素: div hr p h1~h6 ul ol dl form table 行内元素会按照顺序, 从左到右排列, 碰到父元素边界会自动换行 常用元素: span a i em 一. 标准流 标准流是最基本的布局方式 注意: 实际开发中, 一个页面基本都包含了这三种布局方式(后面移动端学

页面布局要学习三大核心: 盒子模型, 浮动 和 定位 学好盒子模型能非常好的帮助我们布局页面 网页布局过程 先准备好相关网页元素, 网页元素基本都是盒子Box 利用CSS设置好盒子样式, 然后摆放到相应位置 往盒子里面装内容 网页布局的核心: 就是利用CSS摆盒子 盒子模型 border边框 边框粗细border-width: 5px; 边框样式border-style: solid/dashed/dotted; 边框颜色border-color: red; 简写: - `borde

三大特性 层叠性 相同标签名, 标签内部标签 样式冲突, 遵循就近原则 样式不冲突, 不会层叠 继承性 子标签会继承父标签的某些样式 恰当使用继承可以简化代码, 降低CSS样式的复杂性 子元素可以继承父元素的样式(text-, font-, line-这些元素开头的 可以继承, 以及color属性 行高可以跟单位也可以不跟单位 优先级 党同一个元素指定多个选择器, 就会有优先级的产生 选择器相同, 则执行层叠性 选择器不同, 则根据选择器权重执行 [外链图片转存失败,源站可能有防盗链机制,建议将图

背景 背景颜色 一般情况下元素背景颜色默认值是transparent(透明的) background-color: red; 背景图片 实际开发常见于logo或者一些装饰性的小图片或者是超大的背景图片 background-image: url(); 优点是非常便于控制位置(精灵图也是一种运用场景) 背景平铺 如果需要在HTML页面上对背景图像进行平铺, 可以是使用background-repeat属性 background-repeat: repeat|no-repeat|repeat-x|repe

什么是元素的显示模式 元素显示模式的分类 元素显示模式转换 元素显示模式就是元素(标签)以什么方式进行显示 HTML元素一般分为块元素和行内元素两种类型 块元素 常见块元素<h1>~<h6> <p> <div> <ul> <ol> <li>等 块元素特点: 比较霸道, 自己独占一行 高度, 宽度, 外边距以及内边距都可以控制 宽度默认是容器(父级宽度)的100% 是一个容器及盒子, 里面可以放行内或者块级元素 注.

后代选择器（常用重要） 后代选择器又称为包含选择器， 可以选择父元素里面的子元素，中间用逗号分隔 当标签发生嵌套时，内部标签就成为外部标签的后代 元素1 元素2 { 样式声明 } 上述语法表示选择元素1里面的所有元素2 元素2可以是儿子， 也可以是孙子登， 只要是元素1的后代即可 元素1和元素2可以是任意基础选择器 子选择器（重要） 子选择器只能选择作为某元素的最近一级子元素。简单理解就是选亲儿子元素， 和孙子无关 元素1>元素2 { 样式声明 } 上述语法表示选择元素1里面左右直接后代（

Emmet语法 Emmet语法前身是Zen coding, 它使用缩写, 来提高html/css的编写速度, VsCode内部已经集成该语法 快速生成HTML结构语法 快速生成CSS样式语法 快速生成HTML结构语法 生成标签,直接输入标签名 按tab键即可, 比如div 然后tab键,就可以生成<div></div> 生成多个相同标签, 加上*数字即可 生成有父子级关系的标签, 用> 比如 ul>li 生成有兄弟关系的标签, 用+ 比如div+p 生成带有.

CSS样式表 CSS的三种样式表 按照CSS样式书写的位置(或者音符的方式), CSS样式表可以分为三大类 1. 行内样式表(行内式) 在元素标签内部的style属性中设定CSS样式 适合于修改简单样式 <div style="color: red; font-size: 12px;">小屁熊</div> 2. 内部样式表(嵌入式) 单独把所有CSS样式抽取出来, 单独放在一个<style>标签中 <style> div {

1. 字体属性Fonts 用于定义字体系列、大小、粗细、和文字样式（如斜体） 字体系列 font-family 各字体之间用,隔开 写多个字体,兼容性会好一些 body { /* font-family: '微软雅黑'; 中文名, 下面的是英文名,一样的效果,常用英文名*/ /* font-family: 'Microsoft YaHei'; */ font-family: 'Microsoft YaHei' Arial, Helvetica, sans-serif; } 字体大小 font

style通常写在head中 样式格式书写 紧凑模式 展开模式（常用） 样式大小写风格 样式选择器，属性名，属性值关键字全部使用小写字母，特殊情况除外 样式空格风格 h3 { color: pink; } 属性值前面，冒号后面，保留一个空格 选择器（标签）和大括号中间保留空格 选择器 1. 基础选择器： 单个选择器，包括标签选择器、类选择器、id选择器和通配符选择器（*） 标签选择器 优点：能快速为页面中同类型的标签统一设置样式 缺点：不能设计差异化样式，只能选择全部的