![](https://img-blog.csdnimg.cn/20201014180756930.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
HTML/CSS
明日份可乐
Hello World!
展开
-
浅谈HTML盒模型
在HTML中 每一个元素都被当成一个盒子,拥有盒子的平面外形和空间1.盒模型由:内容(content) 内边距(padding) 边框(border) 外边距(margin)组成2.盒模型分为标准盒模型和怪异盒模型标准盒模型所占用空间大小的计算方式为:content + margin + padding + border怪异盒模型所占用空间大小的计算方式为:内容(width) + 外...原创 2019-08-13 12:52:13 · 219 阅读 · 0 评论 -
css清除浮动
元素的清除浮动为什么要清除浮动?方法一:开启BFC的代码 常在父级书写: overflow: hidden等方法二在所有浮动子元素的最下面书写一个块级空标签 添加clear: both;方法三在所有浮动子元素的最下面书写一个标签 添加clear: all;方法四给父级设置高度 (基本不用)方法五给父级一个after伪元素 代替直接在所有浮动子元素下面书写空标签的方法...原创 2019-08-13 13:17:05 · 122 阅读 · 0 评论 -
浅谈元素的浮动
元素的浮动浮动主要用来做文字环绕特效 水槽原理浮动元素不能超过上一个兄弟元素(无论是否浮动)浮动元素在一行排列 顶部对齐浮动的影响原创 2019-08-13 13:18:28 · 168 阅读 · 0 评论 -
浅谈css精灵图
什么是css精灵图? 有什么作用? **1. 把所需的背景图合并在一起 从整体上减少图片大小** **2. 把多个图片合在一起 减少客户端请求服务器的次数** **3. 利用缓存机制 提高运行速度 提升用户体验**...原创 2019-08-13 11:18:03 · 118 阅读 · 0 评论 -
浅谈HTML元素水平垂直居中的方法(待更新)
方法一: position:abusolute; left:0; top:0; right:0; bottom:0; margin:auto;方法二 position:absolute; left:50%; top:50%; transform:translateX(50%) translateY(50%);原创 2019-08-13 11:00:04 · 103 阅读 · 0 评论 -
HTML/CSS(关于等高布局)
<style> * { margin: 0; padding: 0; } .box { overflow: hidden; /* 给父级设置flex就不用让左右元素都浮动了 */ display: flex; ...原创 2019-08-13 00:03:41 · 347 阅读 · 0 评论 -
详解 src 与 href 的区别
src与href 的区别1. src用于替换当前元素,href用于在当前文档和引用资源之间确立关系。src-source,指向外部资源位置,指向的内容将会嵌入到文档中当前标签所在位置;在请求src资源时会将其指向的资源下载并应用到文档内部,例如js脚本,img图片和frame等元素。<script src="source.js"></script>当浏览器解析到...转载 2019-08-15 10:41:45 · 664 阅读 · 0 评论 -
HTML页面结构
Doctepy 文档声明doctype声明文档类型 让浏览器以html5解析 如果没有 可能会出现怪异盒模型doctype 之后紧接着出现了 html元素,这是文档的根元素,接下来的所有内容都是根元素的后代。 head 元素包含描述文档本身的信息,以及相关的资源,比如 JS 脚本和 CSS样式。 页面中的大部分内容都在 body 内 标签 js脚本也可以在bod...原创 2019-08-15 10:26:24 · 150 阅读 · 0 评论 -
简单css文字溢出样式
原创 2019-08-14 09:23:45 · 576 阅读 · 0 评论 -
浅谈BFC
BFC:“块级格式化上下文” 其实就是一块区域 决定元素如何对其内容进行定位 并且决定了和其他元素的关系构成BFC的条件浮动定位 (relative & absolute)display: inline-block table-cells flexoverflow: scroll hidden auto根元素...原创 2019-08-13 17:20:08 · 108 阅读 · 0 评论 -
浅谈禁止网页的系统滚动条
网页的系统滚动条当html和bodu只有html拥有overflow属性的时候 html的滚动条就会传递到系统同滚动条document上当html和body 只有body拥有overflow属性 那么body的滚动条也会传递到系统滚动条上当html和body都拥有overflow属性的时候 那么body的滚动条是属于body自己的 html的滚动条会传递到document上禁止系统滚动...原创 2019-08-13 15:37:14 · 418 阅读 · 0 评论 -
浅谈css的overflow属性
overflow属性: 控制元素超出后的显示方式:visible - "默认值"(当元素不设置任何overflow属性的时候 元素超出的部分正常显示 超出的部分不会占用空间)overflow:hidden - “超出隐藏” :隐藏的是超出的部分 以及 滚动条的样式overflow:scroll - “生成滚动条样式” :默认 x 和 y全部生成 可以通过overflow-x和ove...原创 2019-08-13 14:31:59 · 161 阅读 · 0 评论 -
浅谈包含块
包含块:(当一个元素没有设置定位属性的时候 这个元素position的值是默认的static 那么这个元素的包含块就是它的父级)当一个元素是相对于自身的位置的定位(relative) 那么这个元素的包含块也是它的父级当一个元素定位属性的值是absolute时 这个元素的包含块是离它最近的那个拥有定位属性的父级/祖父级如果元素是相对于浏览器窗口定位的(fixed) 那么这个元素的包含块是初...原创 2019-08-13 14:20:56 · 316 阅读 · 0 评论 -
CSS元素的重叠方式
CSS元素的重叠方式负marginposition浮动原创 2019-08-13 13:15:10 · 10509 阅读 · 0 评论 -
浅谈css定位
定位相对定位相对于自身的位置定位(right:100px; (元素会向左移动))不会脱离页面流left right top bottom 控制元素的定位位置 如果这几个属性同时又值 left和top具有优先性一个元素设置相对定位 不会影响这个元素的其他属性一般用在创建包含块 或者是给非定位的元素设置堆叠顺序(只有定位属性才支持z-index)绝对定位相对包含快的位置进行定位...原创 2019-08-13 12:57:57 · 81 阅读 · 0 评论