- 博客(15)
- 收藏
- 关注
原创 弹性盒
calc(x-y)方法:运算符号前后一定要空格pointer-events:none;穿透到当前元素标准盒模型:box-sizing:content-box宽高是独立的内边距是独立的,会把元素撑大边框是独立的注意:宽高不包含边距和边框怪异盒模型:box-sizing:border-box宽高包含内边距和边框怪异盒模型触发方式:1、丢失<!doctype html>在i...
2020-03-22 22:02:27 142
原创 视口
br>视口:就是浏览器显示页面内容的屏幕区域视口分为:布局视口 视觉视口 理想视口布局视口:一般移动端设备的浏览器都默认设置了一个布局视口为了解决早期pc端页面在移动端上的现实问题苹果 安卓 基本上设置这个视口的分辨率980px视口视觉:你看到的网页区域,指的是网址的区域通过缩放去操作视觉视口不会影响布局视口理想视口:1、是网站在移动端设备的浏览器中最理想的状...
2020-03-24 23:17:24 358
原创 响应式布局
flex-grow:;定义项目进行扩张(放大)flex-shrink:;项目总宽度超出容器时的缩小设置0本身无变化1平均分配flex-basis:;项目的长度综合写法:flex:放大 缩小 长度;(后两者一般不写)多列布局:column-count:;分列column-gap:;列间隔column-rule:大小 形态 颜色;分割线column-fill:;列的高度是否统...
2020-03-23 22:35:53 175
原创 过渡
过渡:让元素的动画发生平滑的效果,而不是生硬直接的效果1、属性在做动画transtion-property:属性1,属性2…2、过渡时间transtion-duration:时间3、等待时间(可以选择)transtion-delay:时间(延迟时间)4、动画类型(可以不写)transtion-timing-funtion:;简写:transtion:属性 过渡时间 延迟 ...
2020-03-21 22:34:52 149
原创 前端
文本阴影:text-shadow:水平阴影 垂直阴影 模糊度 颜色;text-shadow:第一层,第二层,第三层;在单词内部换行:word-wrap:;normal默认值,不允许在单词内部换行break-word 允许单词在内部换行word-break:; break-all允许在单词内部换行keep-all 允许在换行点换行,单词内部不换行box-shadow:水平阴影...
2020-03-19 22:51:01 87
原创 前端
渐进增强:(从小到大)先保证最基本的功能~>用户体验的提升优雅降级:(从大到小)现针对版本较高的设备进行项目构建,保证用户体验的完美~>牺牲一些效果,保证基本的功能属性选择器:e[attr]{}选中e元素,且e元素有attr属性e[attr=“value”]{}选中e元素,且e元素有attr属性,包含值为valuee[attr~=“value”]{}选中e元素,且e元素有at...
2020-03-18 22:50:44 149
原创 前端
语义化标签:(指定内容的仓库)section:类似于div,偏向画结构article:偏向于内容展示aside:偏向于旁边的内容,在一侧的header:内容的头部,网页的头部区域footer:尾部的内容,网页的尾部区域nav:做导航 链接区域figure>figcaption:类似dl>dt+dd的结构注意:figcaption是figure的标题,一般在第1个位...
2020-03-17 22:00:34 76
转载 前端
网页制作是web1.0时代的产物,那个时候的网页主要是静态网页,所谓的静态网页就是没有与用户进行交互而仅仅供读者浏览的网页,我们当时称为“牛皮癣”网页。例如一篇QQ日志、一篇博文等展示性文章。在web1.0时代,用户能做的唯一事情就是浏览这个网站的文字图片内容,这时用户也不能像现在在大多数网站都可以评论交流(缺乏交互性)。相信可能大多数人都听过“网页三剑客 Dreamweaver+Firewo...
2020-03-16 23:13:32 206
原创 前端
表格:thead 表头 tbody 表体tfoot 表尾 th 列标题,默认文本加粗,上下居中左右居中colgrop 划分多少列为一组span=“多少列”caption 表格标题,默认左右居中表格属性:border-spacing:单元格间距;必须给table添加border-collapse:;合并边框线,必须给table添加 sep...
2020-03-15 22:57:44 136
原创 前端
外边距:改变元素外边的间距内边距:改变元素与内容的间距padding:一个值;改变四个方向padding:两个值(上下 左右)三个值(上 左右 下)四个值(上 右 下 左)顺时针变化padding-top:顶部内边距padding-right: 右内边距padding-bottom:底部内边距padding-left:左内边距注意:内边距没有负值 margin:(一个值)四个方向...
2020-03-15 22:53:57 97
原创 前端
文本溢出设置:overflow hidden 超出隐藏 scroll 超出时,滚动查(未超出也会有滚动机制) auto 超出时,滚动查看(未超出不会有滚动机制) inherit 继承父级的overflow设置 white-space 文本空白 normal 默认值 per 保留原格式,...
2020-03-15 22:51:14 80
原创 前端
文档流:普通流:从上至下;从左至右浮动流:元素添加了float:;定位流:添加了定位属性定位:positionstatic 默认值;设置坐标无效absolute 绝对定位特征:1、脱离文档流;不占位置2、默认参考html的00点(浏览器零点)3、如果有父级;且父级有定位;那就参考父级(默认定位除外)relative 相对定位特征:1、占据文档流2、参考自身在页面中加...
2020-03-15 22:48:09 74
原创 前端
br> 最小高度:min-height;最小宽度:min-width;最大高度:max-height;最大宽度;max-width;宽度自适应:默认宽度100%的元素 width:;单位为%高度自适应:不写height:;(让内容撑起来)height::单位为%(前提条件html,body{width:100%;height:100%;} )浮动元素的高度塌陷:问题:父...
2020-03-15 22:46:17 71
原创 前端
css属性:预览版,还没有一个正式版的最终版,多以有很多的兼容性问题浏览器不识别,浏览器为了使这些属性兼容每一个浏览器厂商都提供了一个属于自己浏览器的语法规则,浏览器兼容前缀。主流览器:谷歌 火狐 苹果 欧朋 ie浏览器前缀:-webkit- -moz- -o- -ms-box-shadow:水平偏移量 垂直偏移量 模糊度 模糊大...
2020-03-15 22:40:32 85
原创 前端笔记
03-13笔记# 1级标题# <br>目标伪类选择器:target{}当元素被点击的指向;发生样式的改变<br>css样式 圆角:border-radius:;<br>元素是正方形 宽度一半的px 50% 正圆<br>元素是长方形 较小值的一半px ...
2020-03-15 13:26:55 219
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人