CSS学习笔记
CSS详细学习笔记
江湖与天涯
逆流而上
展开
-
图片底部出现空白区域问题解决
当使用div包裹图片时你会发现图片底部和盒子底部有一定的间距,这段间距就是空白区域,原因是行内块元素会和文字的基线对齐; 解决这个问题有两个方法: 方法一:给图片添加 vertical-align: middle | top | bottom 等。这也是市面上常用的解决方法 vertical-align: bottom 方法二:将图片转换为块级元素,这样自然就不会存在这种问题了,但是这样会影响布局; display: block ...原创 2022-01-20 11:15:54 · 668 阅读 · 0 评论 -
CSS高级开发技巧
1.显示与隐藏 目的:让一个元素在页面中小时或者显示出来 场景:类似广告,说明之类的,当我们点击取消之后会消失,但是重新刷新页面它又会重新显示出来 实现方法:实现元素的显示和隐藏的方法有三种 display属性 visibility属性 overflow属性 display属性介绍 该属性有两个值,一个是none(不显示元素),一个是block(显示元素),在实际开发过程中应用最多 ...原创 2020-04-07 00:09:50 · 91 阅读 · 0 评论 -
CSS布局机制
网页布局的核心:就是用CSS来摆放盒子 CSS提供了三种机制来摆放和定位盒子,分别为普通流(标准流),浮动和定位 1.标准流(普通流) 块级元素会独占一行,从上向下排列 常用块级元素:div, hr, p, h1-h6, ul, ol, dl, form, table 行内元素会按顺序从左到右排列,直至碰到父级元素的边缘才换行 常用的行内元素:span, a, ...原创 2020-04-04 23:42:14 · 323 阅读 · 0 评论 -
CSS第七篇(盒子模型)
1.盒子组成部分 padding:外边框,盒子与盒子间的距离 border:盒子外边框,可设置大小,颜色等属性 margin:盒子内容与盒子内边框的距离 content:盒子内容,即盒子中所放的内容 2.边框(border) 简写语法 border:border-width border-color border-style; 这三个属性值没有顺序 ...原创 2020-04-04 16:35:56 · 312 阅读 · 0 评论 -
CSS第四篇(复合选择器)
1.后代选择器 概念:后代选择器又称为包含选择器 作用:用于选择元素或元素的子孙后代,一个标签之后的所有标签都会选择 写法:把外层标签写在前面,内层标签写在后面,中间用空格隔开 父级 子级{属性:属性值; 属性:属性值} 语法 <!-- css部分 --> <style> /* 后代选择器 */ .disorderly li{ ...原创 2020-03-29 10:53:30 · 120 阅读 · 0 评论 -
CSS三大特性解析
1.层叠性 概念:多种CSS样式的叠加 如果将同一属性通过两个相同的选择器设置到同一元素上,后面设置的就会将前面设置的属性层叠掉 解决冲突的原则: 遵循就近原则,哪个离着结构近就选哪个 样式不冲突的不会层叠 2.继承性 概念:子元素会继承父元素的某些样式 作用:恰当应用继承性可以简化css代码,降低复杂性 注意:可以继承的样式包括:text-开头的,font-开头的,line-开头的...原创 2020-04-01 22:55:49 · 130 阅读 · 0 评论 -
CSS第六篇(背景)
1.背景颜色 语法 background-color:颜色值; 颜色值默认是transparent 透明的 2.背景图片 语法 background-image:none / url(图片地址) 注意事项:背景图片默认是平铺的,后面必须要加url,但是括号中的地址尽量不要用引号 3.背景平铺(repeat 默认值) 语法 bac...原创 2020-03-31 22:22:20 · 88 阅读 · 0 评论 -
CSS第五篇(显示模式)
1.块级元素 常用块级元素:<h1>~<h6>,<p>,<div>,<ul>,<ol>,<li>,表单标签,表格标签,地址标签等,其中以div最为典型 块级元素的特点: 独占一行 高度,宽度,外边距,内边距都可以控制 默认宽度是容器(父级元素宽度)的100% 是一个容器或...原创 2020-03-30 21:03:09 · 77 阅读 · 0 评论 -
CSS第三篇(font)
font属性介绍: font-size :字号大小,常用单位是px font-family:字体,分微软雅黑,黑体,宋体,也会使用unicode码代替字体 font-weight:字体粗细,加粗是700,不加粗是normoal,或者400 font-style:字体样式,倾斜是italic,不倾斜是normal font综合性写法 选择器{font:font-style font-we...原创 2020-03-28 11:13:25 · 118 阅读 · 0 评论 -
CSS第二篇(选择器篇)
标签选择器 作用:可以选出所有相同的标签 缺点:不能进行差异化选择 语法: p{ color: brown; } 类选择器 可以选出一个或多个标签,可精简css代码 可以根据需求选择 语法: <!-- css部分 --> <style> /* p{ color: brown; } */ ...原创 2020-03-23 21:54:31 · 96 阅读 · 0 评论 -
CSS第一篇(引入CSS样式的方法,及CSS的作用介绍)
CSS的作用(目的) 之前学习的HTML仅限于页面结构呈现,虽然它可以进行页面布局和样式设置,但是较为麻烦,而CSS就是应用于页面布局和样式调整,所以又叫层叠样式表. 引入CSS样式的几种方法 第一种:内联样式(将样式通过一个style属性添加至HTML标签中) 语法如下 <body> <h1 style="color: red; ...原创 2020-03-22 20:46:20 · 204 阅读 · 0 评论