CSS
caicsama
这个作者很懒,什么都没留下…
展开
-
图片适配设置
最近设置手机端,网页给图片设置了宽度,到手机端全部变形,使用下面的方法解决:···img{max-width:100%;height:auto;box-sizing:border-box;}···原创 2021-04-07 20:54:56 · 157 阅读 · 0 评论 -
使用flex制作三栏布局
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .container{原创 2020-12-09 19:52:41 · 233 阅读 · 0 评论 -
get新知识点:max-width:100%
max-width:100%保证所有图片最大显示为其自身的100%;如果出现包含块的尺寸小于图片本身的尺寸的话,以图片的最大尺寸进行显示;img{max-width:100%;}原创 2020-09-27 21:13:57 · 1240 阅读 · 0 评论 -
输入框(使用伪元素 确保 icon垂直居中 还有 75%=(32-4*2)/32计算出来的,border-box中 width=content+border+padding,height同理)
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> /*子绝父相设置定位模式*/ .input-contai原创 2020-09-21 11:16:34 · 136 阅读 · 0 评论 -
清除按钮的原有样式-css
button{//边框清掉 border:0; outline:none;//背景颜色清掉 background-color: transparent;}转载 2020-05-01 22:59:59 · 3647 阅读 · 0 评论 -
二级菜单栏目居中显示CSS+HTML实现
<!DOCTYPE html><html><head><title>测试</title><style type="text/css"> body,html{ padding:0; margin:0; } nav{ background-color...原创 2020-04-30 19:38:09 · 2158 阅读 · 0 评论 -
解决添加了图层之后,不能点击链接
给图层添加CSS样式添加:pointer-events:nonenone表示鼠标事件“穿透”该元素并且指定该元素“下面”的任何东西。转载 2020-04-30 18:31:36 · 192 阅读 · 0 评论 -
CSS3新特性-背景图下尺寸自适应
最近响应式布局的时候,尺寸原因,页面顶部logo显示不正常,background-size:100% 100%;根据容器尺寸的变化而变化转载 2020-04-01 16:26:49 · 221 阅读 · 0 评论 -
CSS-单位(px、em、ex、rem、%、ch、vw、wh、vmin、vmax)
单位描述px屏幕显示的最小单位em元素font-size的倍数ex英文字母小x的高度remroot em 相对于根元素font-size的大小ch相对于0的宽度vw相对于当前视口宽的x%倍 viewport widthvh相对于当前视口高的y%倍 viewport heightvmaxvw和vh中最大的vmin...转载 2020-03-23 16:00:41 · 961 阅读 · 0 评论 -
Css-层叠(样式优先级+选择器优先级+继承)
定义CSS的方式:样式表优先级:内联样式>内嵌样式>外联样式内联样式<div style="background-color:#red">内嵌样式<style>div{ background-color:red }</style>外联样式<link rel="stylesheet" src="index.css"/>但是为...转载 2020-03-23 11:10:16 · 435 阅读 · 0 评论 -
CSS3-变形、过渡、动画
参考:https://www.runoob.com/css3/css3-3dtransforms.htmltransform-变形transform函数描述translate ()平移,transalteX() translateY() translateZ() translate3d()scale()缩放,scaleX() scaleY() scaleZ()...转载 2020-03-22 20:55:05 · 149 阅读 · 0 评论 -
Css3-media query
在同一个样式表中,使用媒体查询定义在不同的媒体(media)中不同的样式(style)。两部分组成:可选的媒体类型+媒体表达式使用方法:1.link标签的media属性指定<link rel="stylesheet" media="all and (max-width:768px)" href="index.css" />2.@media@media screen and...转载 2020-03-22 18:32:18 · 159 阅读 · 0 评论 -
Bootstrap踩坑+记录
找需要的从最简单、单一的实例开始,找到和自己需要相近的,逐渐添加新的内容/组件到里面踩过的坑:使用.row类之后,页面横向出现滚动态条分析:.row{margin-left:-15px;margin-right:-15px;}盒模型是(怪异盒模型)box-sizing:border-box虽然定义了元素width:100%但是由于width=content+paddin...原创 2020-03-18 19:55:55 · 236 阅读 · 0 评论 -
弹性盒模型-display:flex
主轴和侧轴伸缩盒属性:排列方向flex-direction:row | row-reverse | column | column-reverse盒子中子元素的排列方式:row 按主轴从左向右排row-reverse 与row排列方式相反column 按侧轴从上到下排列column-reverse 按侧轴从下网上排 与column方向相反对齐方式justify-conte...原创 2020-03-11 14:36:42 · 353 阅读 · 0 评论 -
CSS-清除浮动
浮动的副作用:高度塌陷,影响兄弟元素的样式什么造成了高度塌陷?由于浮动元素的尺寸超过了包含块的尺寸为什么会影响兄弟元素?浮动元素脱离文档流,不占据正常流中的位置。浮动特点:1.相对于包含块2.限制向上浮动3.浮动元素尺寸小于包含块,高度塌陷4.元素浮动之后,表现为行内块元素(没有设置宽度的时候,根据内容自适应)<div> <div style="f...原创 2020-03-09 15:06:16 · 150 阅读 · 0 评论 -
水平、垂直居中-总结
居中:块级元素中的行内元素居中:块级元素设置text-align:center就可以居中<div style="text-align:center"> <a href="http://www.baidu.com" titile="百度一下,你就知道">搜索</a></div>水平居中:外边距、改变盒模型、定位实现水平居中外边距:块级元素...原创 2020-03-07 13:50:30 · 384 阅读 · 0 评论 -
BFC(Block Formating Context)
BFC(Block Formating Context) :块级格式化上下文,相当于一个盒子,起到隔离作用规则:BFC起隔离作用,内部元素不会受外部元素的影响。一个元素只能存在于一个BFC中,如果同时存在于两个BFC中,违反了BFC的隔离作用BFC中元素按正常流排列,元素之间的间隔用margin控制BFC不会于外面浮动的元素重叠计算BFC的高度,需要包括浮动子元素的高度如何创建...原创 2020-03-07 00:05:54 · 119 阅读 · 0 评论