HTML和CSS
黑夜来袭Z
这个作者很懒,什么都没留下…
展开
-
rem响应式布局
定义:rem是一个相对单位,相对于根元素font-size大小。例如:html{font-size:10px;}1rem=10px如何实现响应式布局:首先确定设计稿大小,例如750像素,如果将设计稿10等分则1rem=75px将设计稿中的像素换算为rem单位,例如:设计稿中150像素大小的元素为2rem然后根据屏幕大小更改rem的值,当屏幕大小为500px时,1rem=50px;当屏幕大小为1000px时,1rem=100px当rem的值发生变化的时候以75为基准换算好原创 2021-03-12 19:50:40 · 242 阅读 · 0 评论 -
响应式图片srcset未生效
<img srcset="1.png 1920w, elva-fairy-480w.jpg 480w, elva-fairy-800w.jpg 800w" sizes="(max-width: 600px) 480px, 1920px" src="elva-fairy-800w.jpg" alt="Elva dressed as a fairy" />问题:调节窗口大小没有触发响应式变更图片原因:在浏览器有缓存中有更高分辨率.原创 2021-02-26 21:36:52 · 747 阅读 · 1 评论 -
css布局
1、一行中包含图片,让行内元素垂直居中默认情况下图片跟文字的基线对齐给图片添加vertical-align:middle属性指定图片与文字的中线对齐:文字的位置依赖图片的位置,图片的位置不变为文字盒子指定line-height:50px;属性是文字在盒子中居中:盒子位置依赖文字位置,文字位置不变<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" ...原创 2021-02-21 22:18:28 · 73 阅读 · 1 评论 -
css 三栏布局实现方式
三栏布局:左右两边固定,中间自适应1、左右两边浮动,中间用margin给左右两边留位置<style> .left{ float: left; width: 200px; background: green; height: 200px; } .center{ margin: 0 300px 0 200px; background: yellow; he原创 2021-02-08 19:11:10 · 64 阅读 · 0 评论 -
css中的细节
1、盒子模型的宽高右外边距、边框、内边距决定,但是鼠标的hover检测只会受内边距和边框的影响。原创 2020-08-28 15:18:24 · 122 阅读 · 0 评论 -
viewport表现
1、做轮播图时,当设置meta标签 不设置user-scalable或者user-scalable=yes时,并且ul中包含多张图片时无法拖动到最后一张图片。user-scalable = true时则可以。暂不清楚原因。<meta name="viewport" content="width=device-width, initial-scale=1.0">...原创 2020-11-02 10:15:17 · 62 阅读 · 0 评论 -
css不常见的表现(待解答)
1、设置body的background-image时如果background-position为上下位置为center会缩放背景图片的高度。原创 2020-10-13 13:25:19 · 40 阅读 · 0 评论 -
input和line-height以及margin的交互
line-hegith效果:1、存在文本子元素,并且未设置高度时,line-hegiht可以使文本元素垂直居中对齐、设置元素高度。line-height对input的影响:1、line-height会将input视为文本元素,并使其垂直居中,但是因为Input存在默认外边距边距(无法通过margin:0消除,可以用float消除),所以看起来并不是居中对齐。2、当input的父元素设置了line-height时:如果input的margin-top/bottom值小于line-height为原创 2020-09-21 13:10:58 · 672 阅读 · 0 评论 -
CSS自动换行
自动换行问题,正常字符的换行是比较合理的,而连续的数字和英文字符常常将容器撑大,挺让人头疼,下面介绍的是CSS如何实现换行的方法对于div,p等块级元素正常文字的换行(亚洲文字和非亚洲文字)元素拥有默认的white-space:normal,当定义的宽度之后自动换行html<div id="wrap">正常文字的换行(亚洲文字和非亚洲文字)元素拥有默认的white-space:normal,当定义</div>css#wrap{white-space:normal; wi转载 2020-09-19 10:19:38 · 189 阅读 · 0 评论 -
CSS中的transition
transition函数触发的前提条件1、对应属性例如:width存在默认值。否则不会触发。原创 2020-09-10 21:46:46 · 122 阅读 · 0 评论 -
CSS中伪元素的细节
1、伪元素表现为行内元素。2、伪元素必须包含content属性,否则不会显示。3、content中的内容不为空并且没有设置高度时,伪元素的高度会受到父级元素line-height影响。4、content中的内容位置受父级元素line-height影响。...原创 2020-09-10 18:32:05 · 248 阅读 · 0 评论 -
CSS中的定位:relative和absulote、fixed的表现
1、relative:不是脱标的。(1)相对定位的边偏移始终相对自身移动。2、absulote:脱标。(1)绝对定位的边偏移相对于最近的定位父元素移动。(2)当绝对定位的元素宽度/高度为百分比时相对于最近的定位父元素赋值。...原创 2020-09-10 17:59:15 · 1109 阅读 · 0 评论