![](https://img-blog.csdnimg.cn/20201014180756925.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
css初级
文章平均质量分 67
随笔
旅泊
总有一个晴朗的上午
风会停
雪会化
希望会到来
展开
-
12 css元素显示与隐藏
元素的显示与隐藏类似网站广告, 当我们点击关闭就不见了, 但是我们重新刷新页面, 会重新出现本质: 让一个元素在页面中隐藏或者显示出来1. display显示隐藏display属性用于设置一个元素应如何显示display: none; 隐藏对象display: block; 除了转换为块级元素之外, 同时还有显示元素的意思display隐藏元素后, 不再占有原来的位置应用极为广泛, 搭配js可以做很多网页特效2. visibility显示隐藏visibility属性用于指定一个原创 2021-01-26 08:32:25 · 145 阅读 · 0 评论 -
11 网页布局-定位
定位为什么需要定位?提问: 以下情况使用标准流或者浮动能实现吗?某个元素可以自由的在一个盒子内移动位置, 并且压住其他盒子当我们滚动窗口时, 盒子是固定在屏幕某个位置的以上效果, 标准流或浮动都无法快速实现, 此时需要定位来实现所以:浮动可以让多个块级盒子一行没有缝隙排列显示, 经常用于横向排列盒子定位则是可以让盒子自由的在某个盒子内移动位置或者固定在屏幕中某个位置, 并且可以压住其他盒子定位组成定位: 将盒子定在某一个位置. 所以定位也是在摆盒子, 按照定位的方式移动盒子定原创 2021-01-26 08:32:14 · 165 阅读 · 0 评论 -
10 网页布局-浮动
浮动传统网页布局的三种方式CSS提供了三种传统布局方式(简单说, 就是盒子如何进行排列顺序)普通流(标准流/文档流)所谓的标准流: 就是标签按照规定好默认方式排列块级元素会独占一行, 从上往下顺序排列常用元素: div hr p h1~h6 ul ol dl form table行内元素会按照顺序, 从左到右排列, 碰到父元素边界会自动换行常用元素: span a i em一. 标准流标准流是最基本的布局方式注意: 实际开发中, 一个页面基本都包含了这三种布局方式(后面移动端学原创 2021-01-25 16:26:09 · 359 阅读 · 0 评论 -
09 css盒子模型
页面布局要学习三大核心:盒子模型, 浮动 和 定位学好盒子模型能非常好的帮助我们布局页面网页布局过程先准备好相关网页元素, 网页元素基本都是盒子Box利用CSS设置好盒子样式, 然后摆放到相应位置往盒子里面装内容网页布局的核心: 就是利用CSS摆盒子盒子模型border边框边框粗细border-width: 5px;边框样式border-style: solid/dashed/dotted;边框颜色border-color: red;简写:- `borde原创 2021-01-25 16:13:02 · 67 阅读 · 0 评论 -
08 css特性
三大特性层叠性相同标签名, 标签内部标签样式冲突, 遵循就近原则样式不冲突, 不会层叠继承性子标签会继承父标签的某些样式恰当使用继承可以简化代码, 降低CSS样式的复杂性子元素可以继承父元素的样式(text-, font-, line-这些元素开头的 可以继承, 以及color属性行高可以跟单位也可以不跟单位优先级党同一个元素指定多个选择器, 就会有优先级的产生选择器相同, 则执行层叠性选择器不同, 则根据选择器权重执行[外链图片转存失败,源站可能有防盗链机制,建议将图原创 2021-01-25 16:10:31 · 54 阅读 · 0 评论 -
07 css背景
背景背景颜色一般情况下元素背景颜色默认值是transparent(透明的)background-color: red;背景图片实际开发常见于logo或者一些装饰性的小图片或者是超大的背景图片background-image: url();优点是非常便于控制位置(精灵图也是一种运用场景)背景平铺如果需要在HTML页面上对背景图像进行平铺, 可以是使用background-repeat属性background-repeat: repeat|no-repeat|repeat-x|repe原创 2021-01-25 16:09:40 · 68 阅读 · 0 评论 -
06 css元素的显示模式
什么是元素的显示模式元素显示模式的分类元素显示模式转换元素显示模式就是元素(标签)以什么方式进行显示HTML元素一般分为块元素和行内元素两种类型块元素常见块元素<h1>~<h6> <p> <div> <ul> <ol> <li>等块元素特点:比较霸道, 自己独占一行高度, 宽度, 外边距以及内边距都可以控制宽度默认是容器(父级宽度)的100%是一个容器及盒子, 里面可以放行内或者块级元素注.原创 2021-01-25 16:08:54 · 79 阅读 · 2 评论 -
05 css的复合选择器
后代选择器(常用重要)后代选择器又称为包含选择器, 可以选择父元素里面的子元素,中间用逗号分隔当标签发生嵌套时,内部标签就成为外部标签的后代元素1 元素2 { 样式声明 }上述语法表示选择元素1里面的所有元素2元素2可以是儿子, 也可以是孙子登, 只要是元素1的后代即可元素1和元素2可以是任意基础选择器子选择器(重要)子选择器只能选择作为某元素的最近一级子元素。简单理解就是选亲儿子元素, 和孙子无关元素1>元素2 { 样式声明 }上述语法表示选择元素1里面左右直接后代(原创 2021-01-25 16:07:29 · 107 阅读 · 0 评论 -
04 css Emmet语法
Emmet语法Emmet语法前身是Zen coding, 它使用缩写, 来提高html/css的编写速度, VsCode内部已经集成该语法快速生成HTML结构语法快速生成CSS样式语法快速生成HTML结构语法生成标签,直接输入标签名 按tab键即可, 比如div 然后tab键,就可以生成<div></div>生成多个相同标签, 加上*数字即可生成有父子级关系的标签, 用> 比如 ul>li生成有兄弟关系的标签, 用+ 比如div+p生成带有.原创 2021-01-25 16:06:27 · 86 阅读 · 0 评论 -
03 css引入方式
CSS样式表CSS的三种样式表按照CSS样式书写的位置(或者音符的方式), CSS样式表可以分为三大类1. 行内样式表(行内式)在元素标签内部的style属性中设定CSS样式适合于修改简单样式 <div style="color: red; font-size: 12px;">小屁熊</div>2. 内部样式表(嵌入式)单独把所有CSS样式抽取出来, 单独放在一个<style>标签中<style> div {原创 2021-01-25 16:05:36 · 246 阅读 · 0 评论 -
02 css属性
1. 字体属性Fonts用于定义字体系列、大小、粗细、和文字样式(如斜体)字体系列font-family各字体之间用,隔开写多个字体,兼容性会好一些 body { /* font-family: '微软雅黑'; 中文名, 下面的是英文名,一样的效果,常用英文名*/ /* font-family: 'Microsoft YaHei'; */ font-family: 'Microsoft YaHei' Arial, Helvetica, sans-serif;}字体大小font原创 2021-01-25 16:04:30 · 215 阅读 · 0 评论 -
01 css语法
style通常写在head中样式格式书写紧凑模式展开模式(常用)样式大小写风格样式选择器,属性名,属性值关键字全部使用小写字母,特殊情况除外样式空格风格h3 { color: pink;}属性值前面,冒号后面,保留一个空格选择器(标签)和大括号中间保留空格选择器1. 基础选择器:单个选择器,包括标签选择器、类选择器、id选择器和通配符选择器(*)标签选择器优点:能快速为页面中同类型的标签统一设置样式缺点:不能设计差异化样式,只能选择全部的原创 2021-01-25 16:03:00 · 71 阅读 · 0 评论