HTML+CSS
文章平均质量分 63
总结前端开发必备基础知识,以及学习前沿开发框架及库。
Azure_c_c
这个作者很懒,什么都没留下…
展开
-
字体,文本相关的样式
字体相关的样式color - 字体颜色font-size - 字体大小相关单位:px : css像素em :1em等于1个font-size(当前元素的font-size)rem:1rem等于1个根元素的font-sizeline-height - 行高,文本在网页中都需要创建一个文本框,行高就是文本框的高度文字默认在行高中居中行高可以指定一个像素值,也可以指定一个整数,如果指定一个数字行高就会是字体的倍数行高可以用来设置行间距 = 行高 - 字体大小文字在垂直方向居中,可以将原创 2021-01-31 14:18:30 · 186 阅读 · 0 评论 -
定位元素,元素层级
定位元素相对于浮动元素,定位元素更加灵活。设置定位元素使用position属性来设置元素的定义可选值:static 默认值 没有开启定位relative 开启相对定位absolute 开启绝对定位fixed 开启固定定位相对定位元素的特点元素不会脱离文档流相对于该元素在文档流中的原位置进行定位的。相对定位会使元素提升一个层级相对定位不会改变元素的性质,块还是块元素,行内还是行内元素绝对定位元素的特点元素会完全脱离文档流绝对定位会改变元素的性质,这个性质符合元素脱离文原创 2021-01-31 14:11:48 · 629 阅读 · 0 评论 -
文档流,元素浮动,浮动元素的问题
什么是文档流文档流也叫标准流,是网页中的一个位置,默认情况页面中的所有元素都在文档流中排列。元素在文档流中的特点块元素自上向下排列,独占一行默认宽度和父元素相同默认高度被内容撑开行内元素自左向右水平排列如果内容一行放不下,则会换行继续从左到右排列。默认高度和宽度会被内容撑开浮动一般网页中采用块级元素来进行页面模块划分,每个块级元素都是独占一行的,可以使用浮动的方式将多个块级元素水平排列设置元素浮动使用 float 属性将元素设置为浮动可选值:none 默认值 不浮动原创 2021-01-31 13:55:31 · 738 阅读 · 0 评论 -
圆角、轮廓和阴影
元素的圆角border-radius - 一个长度值,按照圆的半径擦除某个角如果你在 border-radius 属性中只指定一个值,那么将生成 4 个 圆角。但是,如果你要在四个角上一一指定,可以使用以下规则:四个值: 第一个值为左上角,第二个值为右上角,第三个值为右下角,第四个值为左下角。三个值: 第一个值为左上角, 第二个值为右上角和左下角,第三个值为右下角两个值: 第一个值为左上角与右下角,第二个值为右上角与左下角一个值: 四个圆角值相同元素的轮廓outline - 轮廓就是不原创 2021-01-31 13:32:27 · 153 阅读 · 0 评论 -
标签嵌套关系
一般情况下块级元素什么都可以放,不会向行内元素放块元素。两个比较特殊的元素:p元素中不能放任何块级元素a元素里什么元素都可以放,除了a元素自己原创 2021-01-31 13:19:42 · 163 阅读 · 0 评论 -
CSS 外边距重叠
外边距的折叠垂直方向相邻的外边距,会发生外边距的折叠现象兄弟元素之间的相邻垂直外边距兄弟元素间两个相邻的外边距,会取两个外边距的绝对值的最大值。如果相邻元素间外边距一个设置正数数,一个设置负数,那么取它们之间的和父子元素之间相邻垂直外边距父子元素的相邻垂直外边距,子元素的外边距会传递给父元素解决父子元素相邻垂直外边距,子元素外边距传递的方案1、在子元素之前加一个table标签。2、用伪元素解决:父元素的:before伪元素设置属性:content: ‘’; display:table原创 2021-01-31 13:05:25 · 96 阅读 · 0 评论 -
元素之间水平布局与垂直布局
元素水平方向布局子元素在父元素中的水平方向的布局,必须满足如下等式:margin-left + border-left + padding-left + width + padding-right +border-right + margin-right = 父元素的width如果等式不满足,则属于过渡约束,浏览器会自动调整右外边距的值。通过一个例子来说明一下:<!DOCTYPE html><html> <head> <meta charset="原创 2021-01-24 14:29:46 · 579 阅读 · 0 评论 -
CSS盒子模型
盒子模型介绍盒模型(box model),在浏览器页面中每一个元素都或多或少的占有一块矩形区域,这块区域就叫做盒模型。如下图所示的盒模型:盒模型由内到外由以下部分组成:内容区(content) - 决定了盒子实际能放的内容大小。内边距(padding)- 决定了内容区与边框之间的距离边框(border)- 指定边框大小外边距(margin)- 距离其他元素(盒子)之间的距离内容区、内边距、边框和外边距之间的关系默认情况下,width和height只是元素的内容区的大小。盒子实际可原创 2021-01-24 13:41:16 · 155 阅读 · 0 评论 -
CSS简介、语法,选择器...(全)
目录CSS简介CSS语法CSS样式写入方式1、内联样式2、style标签3、外部CSS文件(推荐使用)HTML元素之间的关系CSS选择器普通选择器复合选择器伪类选择器a元素特有的伪类伪元素选择器属性选择器样式继承选择器权重CSS简介CSS 指层叠样式表(Cascading Style Sheets)负责网页结构的美化工作根据浏览器的不同,每个浏览器都有默认的CSS样式CSS语法由选择器和 声明块组成。选择器:选择页面中的一个或多个指定元素声明块:是一个整体用大括号{}包裹;由多个样式组成原创 2021-01-07 18:08:02 · 158 阅读 · 0 评论 -
HTML简介、页面结构,常用标签(全)
目录HTML简介标签格式页面结构标签级别块级元素(block element)行级元素(inline element)行级块元素(inline element)常用标签H5语义化标签资源标签图片标签内联框架音频标签视频标签超链接HTML实体HTML简介HTML 超文本标记语言(Hepertext Markup Language)它是一种用于描述网页的语言它负责定义网页的整体结构HTML使用标签的形式来表示页面中的不同组成部分标签格式HTML 有两种标签格式双标签:由开始标签和结束组成原创 2021-01-07 16:33:31 · 1060 阅读 · 0 评论