随笔分类 - HTML CSS
摘要：css特性 继承性 子元素继承父元素样式的特点 //继承常见的属性文字属性都可以继承colorfont-style，font-weight，font-size，font-familytext-indent，text-alignline-heightlist-style....//通过调试工具可以判断
阅读全文
摘要：元素和内容的居中方法 元素 : <标签名>内容</标签名> 标签 : <标签名> 内容 : xxx 代码 <style> .main { text-align: center; } /* marign */ .container { width: 300px; height: 100px; marg
阅读全文
摘要：元素的显示模式 块级元素： 独占一行（一行只能显示一个） 宽度默认是父元素的宽度，高度默认由内容撑开 可以设置宽高 h1~h6,ul,li ,p,ol,dl ,dt,dd ,header,nav,main,footer 行内元素(内联元素): 一行可以显示多个 宽度和高度默认由内容撑开 不可以设置宽
阅读全文
摘要：背景属性 <style> /* 背景图片 和img的区别 背景图片 墙纸 img 墙上挂的钟表 */ .main { width: 800px; height: 800px; /* 背景颜色 transparent透明 颜色的表示方式： 第一种： red yellow blue green... 第
阅读全文
摘要：后代选择器 选择器1 选择器2{} 子代选择器 选择器1>选择器2{} 群集选择器 选择器1,选择器2{} 交集选择器 选择器之间紧挨着 交集选择器中有标签选择器，标签选择器必须放在最前面 作用:选中页面中同时满足多个选择器的标签 既被选择器1选中又被选择器2选中的标签 选择器1选择器2{}
阅读全文
摘要：字体样式 p { /* 字体大小 浏览器默认文字大小是16px 单位一定要设置，否则无效 */ font-size: 24px; /* 字体粗细 bold 加粗 font-weight: lighter; 纯数字：100-900的整百数 */ font-weight: lighter; /* 字体样
阅读全文
摘要：css的引用方式 内联样式 <!-- 内联样式 所有标记 有公共的html属性 style 值为css的内容 <标记 style="css属性名:属性值;css属性名:属性值;">内容</标记> 缺点:html和css混淆在一起，单个设置样式麻烦 --> <h1 style="color: red;
阅读全文
摘要：HTML Hyper TextMarkupLanguage的缩写是HTML 大白话：向网页上展示内容 专业术语：超文本标记语言（文字，图片，视频，音频，超链接） 标记：也叫做标签，用<>括起来的就是标记 有两种类型的标记： 双标记 ：<标记名></标记名>单标记 : <标记名 /> 每一个标记，不管
阅读全文
摘要：网站流程 站点的创建 一个网页上所有的网页，素材 （img，js,css,html) 文件命名规范： 用英文不用中文 名称全部小写英文字母，数字，下划线的组合，比如 my_proj1,不能有汉字，空格，和特殊符号& 必须以英文开头 网站的首页必须命名为index.html,不建议使用shouye.h
阅读全文
摘要：动画 animation添加动画效果 多个状态之间的变化过程，动画过程可控(重复播放，最终画面，是否暂停) 动画实现步骤 1：定义动画 /* 1:定义动画 @keyframes 动画名称{ from {} to {} } */ @keyframes change { from { width: 20
阅读全文
摘要：平面转换 改变盒子在平面内的形态（位移，旋转，缩放） 2D转换 属性: 1、 transform（跟transition搭配使用） 位移 transform：translate(水平移动距离，垂直移动距离)取值： 像素单位数值 百分比(参照盒子自身的尺寸) x轴正向为右，y轴正向为下transl
阅读全文
摘要：新增标签 <!-- 1:更简洁 --> <img /> <!-- 2 标签语义化 --> <div></div> <span></span> <header>头部</header> <footer>底部</footer> <main>主体</main> <nav>导航连接</nav> <sectio
阅读全文
摘要：光标类型 设置鼠标光标在元素上显示的样式 cursor default 默认值，通常是箭头pointer 小手效果，提示用户可以点击text 工字型，提示用户可以选择文字move 十字光标，提示用户可以移动 边框圆角 让盒子四个角变得圆润 border-radius: 数字+px/百分比； over
阅读全文
摘要：阿里字体图标 https://www.iconfont.cn/ 查找图标 > 把图标添加入库 >点购物车-->下载代码 vertical-align 垂直对齐方式 基线:浏览器文字类型元素排版中存在用于对齐的基线 作用： 解决行内/行内块元素垂直对齐问题 项目中解决得问题: 图片和文字得垂直对齐 文
阅读全文
摘要：定位 1：标准流 块级元素独占一行 垂直布局 行内元素/行内块元素一行显示多个 水平布局 2：浮动 让原本垂直布局的块元素变成水平布局 3：定位 可以让元素自由的摆放在网页的任意位置 用于盒子之间的层叠情况 4：使用场景 定位之后元素层级越高，可以层叠在其他盒子上 可以让盒子固定在屏幕中的某个位置
阅读全文
摘要：清除浮动 概念 如果子元素浮动了，此时子元素不能撑开标准流的块级父元素 原因:子元素浮动后脱离了标准流 解决： 给父元素设置高度 内容的高度高于父元素，父元素不会被撑开，影响了整体的布局 额外的标签 在父元素内容的最后面添加一个块级元素 给添加的块级元素设置 clear:both 缺点：在页面中添加
阅读全文
摘要：盒子模型 页面中的每一个标签都看成是一个 盒子 浏览器在显示页面的时候，把页面中的元素看作是一个个矩形区域，也称之为 盒子 css中盒子由 内容content，内边距padding，边框border，外边距margin 构成，就是盒子模型 内容 内容的宽度和高度 通过width和height属性设置
阅读全文
