html
u014378108
这个作者很懒,什么都没留下…
展开
-
块居中 总结
方法2-1:left:50%;方法2-2:left:50%;transform:translate()方法1:left,right,top,bottom:0;原创 2023-12-28 09:43:40 · 397 阅读 · 0 评论 -
flex 小案例
【代码】flex 小案例。原创 2023-12-26 17:30:44 · 350 阅读 · 0 评论 -
first-child nth-child() :hover
item 下的第一个子孙,且这个子孙是dl ,在这个元素下的dt color:red。所有item下的 第一个孩子且是ul,下 的 第一个孩子且是li 的背景色。=========firth-child nth-child 结合。鼠标移动到li的时候,显示该hover元素下的 .sec-memu。ul 下的第一个孩子且是li元素 下的a。=========上面的demo 调整样式。对比,ul 的第一个孩子不是li元素。ul 下的 第一个孩子&li。2n+1 2n-1 奇数。原创 2023-12-19 17:54:13 · 423 阅读 · 0 评论 -
background-position
图片 往上移动,即y轴负方向。显示图标2 ,图片向x负方向移动,y轴不变。显示图标4,图片要往左移动,即 x轴负方向。原创 2023-12-19 10:55:50 · 315 阅读 · 0 评论 -
元素之间的空白
行内元素、行内块元素,彼此之间的换行会被浏览器解析为一个空白字符。1. 方案一: 去掉换行和空格(不推荐)。原创 2023-12-18 10:17:18 · 358 阅读 · 0 评论 -
float
对兄弟元素的影响:对前面的兄弟无影响。后面的兄弟元素,会占据浮动元素之前的位置,在浮动元素的下面,下面元素的文字会被挤出来呈现文字环绕的效果对父元素的影响: 不能撑起父元素的高度,导致父元素高度塌陷;但父元素的宽度依然束缚浮动的元素。<style> .box{ width: 40px; height: 40px; background-color: antiquewhite; margin-bott原创 2023-12-18 09:59:36 · 354 阅读 · 0 评论 -
absolute fixed 特殊应用
不设置inner的宽高,设置left,right,bottom,top 为0,position:fixed 或relative .inner元素会填充整个页面。fixed是相对于窗口居中的,不像absolute那样,父元素添加absolute,relative就可以限制住子元素。不设置inner的宽高,设置left,right,bottom,top 为0,会充满整个页面,情况1:父元素添加relative,absolute后,相对父元素(包含块)居中。1、元素充满包含块 2、元素居中。原创 2023-12-18 09:06:08 · 353 阅读 · 0 评论 -
relative absolute fixed sticky 定位
在item的父元素增加overflow:auto 让父元素拥有滚动机制,但是.cont的高度由内容撑开,没有出现滚动条,sticky不生效。2. 对于脱离文档流的元素:包含块是第一个拥有定位属性(absolute,relative)的祖先元素(如果所有祖先都。absoulte:.cont脱离文档流后,下面的文字会移动到 .cont原来的位置,.cont会直接把文字遮住。离它最近的一个拥有“滚动机制”的祖先元素,即便这个祖先不是最近的真实可滚动祖先。离它最近的一个拥有“滚动机制”的祖先元素。原创 2023-12-15 11:38:06 · 1196 阅读 · 0 评论 -
块、行内元素 水平,垂直居中
垂直:marign-top: ( 父元素高度-子元素高度)/2 px 可能会出现margin-top塌陷问题,需要父元素添加overflow:hidden,或padd>0 或border>0。垂直:父元素添加line-height=height ,每个元素加上vertical-align:middle。如果要绝对居中,设置父元素的font-size:0,再设置子元素的font-size:0。水平:在父元素添加text-align:center,对于行内元素或块元素。原创 2023-12-13 11:32:50 · 343 阅读 · 0 评论 -
width height,盒子模型
background的范围默认从border开始到padding 再到content的区域。元素盒子的宽 = content的宽 + 左右padding+ 左右border。元素设置的width,heigth设置的是content的宽高,原创 2023-12-13 11:51:19 · 380 阅读 · 0 评论