随笔分类 -  CSS

CSS学习（12）如何使用float后另起一行
摘要：代码： <div style="border:1px solid black;float:left;">啧啧娜娜</div> <div style="clear:both;height:0px;"></div> <p>另起一行</p> 效果： 啧啧娜娜 另起一行 阅读全文
posted @ 2020-04-12 20:16 盗哥泡茶去了 阅读(774) 评论(0) 推荐(0)
CSS学习（11）常规流
摘要：盒模型：规定单个盒子的规则 视觉格式化模型（布局规则）：页面中多个盒子的排列规则 三种方式： 1.常规流 2.浮动 3.定位 常规流布局 常规流 也可以叫做 文档流、普通文档流、常规文档流 所有元素，默认情况下，都属于常规流布局 总体规则：块盒独占一行，行盒水平依次排列 包含块（containing 阅读全文
posted @ 2019-09-23 20:08 盗哥泡茶去了 阅读(293) 评论(0) 推荐(0)
CSS学习（10）行盒盒模型
摘要：常见的行盒：包含具体内容的元素 span、strong、em、i、img、video、audio 显著特点： 1.盒子沿着内容延伸 2.行盒不能设置宽高，调整行盒的宽高，应使用字体大小、行高、字体类型，间接调整 3.内边距（填充区）、边框、外边距 水平方向有效，垂直方向仅会影响背景，不会实际占据空间 阅读全文
posted @ 2019-09-22 12:36 盗哥泡茶去了 阅读(234) 评论(0) 推荐(0)
CSS学习（9）块盒模型应用
摘要：1.改变宽高范围 默认情况下，width和height设置的是内容盒的宽高 页面重构师：将psd文件（设计稿）制作为静态页面 衡量设计稿尺寸的时候，往往使用的是边框盒 CSS3中 box-sizing 可设置width height的设置对象，如contant-box border-box 2.改变 阅读全文
posted @ 2019-09-21 23:03 盗哥泡茶去了 阅读(148) 评论(0) 推荐(0)
CSS学习（8）盒模型
摘要：box：盒子，每个元素在页面中都会生成一个矩形区域（盒子） 盒子类型： 1.行盒，display属性=inline的元素，不换行（默认值） 2.块盒，display属性=block的元素，换行 浏览器默认样式表设置的块盒：容器元素、h1~h6、p 常见的行盒：span、a、img、video、aud 阅读全文
posted @ 2019-09-21 19:40 盗哥泡茶去了 阅读(141) 评论(0) 推荐(0)
CSS学习（7）继承、属性值的计算过程
摘要：子元素会继承父元素的某些css属性 通常跟字体相关的属性都能被继承，具体的可以在mdn里查询是否是可继承属性 属性值的计算过程（渲染过程） 按照页面文档的树形目录结构进行依次渲染 前提条件：渲染的元素的所有CSS属性必须有值 一个元素从所有属性都没有值到所有属性都有值，这个计算过程，叫做属性值计算过 阅读全文
posted @ 2019-09-21 19:07 盗哥泡茶去了 阅读(319) 评论(0) 推荐(0)
CSS学习（6）层叠
摘要：1.声明冲突 不同的样式，多次应用到同一元素 层叠：解决声明冲突的过程，浏览器自动处理（权重计算） 有时候需要修改样式的时候，可以使用优先级高的方式覆盖，而不是在源代码修改 ①比较重要性 (1)作者样式表中的 !important 样式 用法：color:red !important; 拥有最高优先 阅读全文
posted @ 2019-09-21 17:39 盗哥泡茶去了 阅读(148) 评论(0) 推荐(0)
CSS学习（5）更多的选择器
摘要：1.通配符选择器 * 表示选中所有元素 *{color:red;} 2.属性选择器 根据属性名和属性值选中元素 https://developer.mozilla.org/zh-CN/docs/Web/CSS/Attribute_selectors 3.伪类选择器 选中某些元素时的某种状态 hove 阅读全文
posted @ 2019-09-20 08:01 盗哥泡茶去了 阅读(130) 评论(0) 推荐(0)
CSS学习（4）常见样式声明
摘要：1.文本 color 文字颜色 预设值：定义好的单词，如red blue 光学的三原色（红，绿，蓝），如 rgb(32,45,255) HEX十六进制，如#008CFF（#112233可以简写为#123） text-align 对齐方式 值：center居中 right居右 justify每一行被展 阅读全文
posted @ 2019-09-20 02:40 盗哥泡茶去了 阅读(269) 评论(0) 推荐(0)
CSS学习（3）样式表
摘要：如何插入样式表 插入样式表的方法有三种: 外部样式表(External style sheet) 内部样式表(Internal style sheet) 内联样式(Inline style) 外部样式表 当样式需要应用于很多页面时，外部样式表将是理想的选择。在使用外部样式表的情况下，你可以通过改变一 阅读全文
posted @ 2019-09-18 05:47 盗哥泡茶去了 阅读(241) 评论(0) 推荐(0)
CSS学习（2）Id和Class选择器
摘要：id 选择器 id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。 HTML元素以id属性来设置id选择器,CSS 中 id 选择器以 "#" 来定义。 以下的样式规则应用于元素属性 id="para1": #para1 { text-align:center; color:red; 阅读全文
posted @ 2019-09-18 02:50 盗哥泡茶去了 阅读(230) 评论(0) 推荐(0)
CSS学习（1）简介
摘要：什么是 CSS? CSS 指层叠样式表 (Cascading Style Sheets) 样式定义如何显示 HTML 元素 样式通常存储在样式表中 把样式添加到 HTML 4.0 中，是为了解决内容与表现分离的问题 外部样式表可以极大提高工作效率 外部样式表通常存储在 CSS 文件中 多个样式定义可 阅读全文
posted @ 2019-09-18 02:42 盗哥泡茶去了 阅读(112) 评论(0) 推荐(0)