HTML、CSS
文章平均质量分 77
HTML、CSS
菠萝啊菠萝蜜
hello world
展开
-
CSS媒体查询
针对不同的屏幕尺寸(媒体类型)定义不同的css样式。针对不同的屏幕尺寸,引入不同的媒体css样式;min-wiidth最小宽度 是大于等于>原创 2021-05-18 19:23:01 · 147 阅读 · 0 评论 -
HTML-表单
表单1 : 表单标签(表单域、表单框)<form></form> 属性 : action = '接口地址(服务器地址)' method = 'get / post' name = '表单名称' target='_blank'(新窗口打开)2 : 表单控件<input> 属性: type = '控件类型' name:属性标识表单域的名称.原创 2021-04-28 11:10:47 · 75 阅读 · 0 评论 -
怪异盒模型+flex布局
子元素是否换行显示(主轴是x轴就是换行,主轴是y轴 就是换列 )flex-wrap:nowrap(默认不换行)wrap(换行)默认不换行,如果父元素装不开,会自动缩小子元素;原创 2021-05-17 08:35:33 · 722 阅读 · 0 评论 -
伪元素选择器
伪元素在css样式中创建一个元素,在html结构中找不到,所以叫伪元素伪对象选择符(IE6及以下版本不识别)1)、::after : 与content属性一起使用,可以在当前元素内最后的位置添加内容(文本、图片、元素)。语法:选择符::after{content:”文字”;} 选择符::after{content:url(图片路径);}如:div::after{content:url(logo.jpg);} div::after{content:"文本内容";}...原创 2021-05-10 18:39:15 · 104 阅读 · 0 评论 -
浏览器前缀/ css3 渐变 /
浏览器私有前缀为了浏览器兼容新的css3属性-ms- -ms-box-shadow IE浏览器专属的CSS属性需添加-ms-前缀 -moz- -moz-box-shadow 所有基于Gecko引擎的浏览器(如Firefox)专属的CSS属性需添加-moz-前缀 -o- -o-box-shadow Opera浏览器专属的CSS属性需添加-o-前缀 -webkit- -webkit-box-shadow 所有基于Web...原创 2021-05-11 22:54:09 · 1136 阅读 · 0 评论 -
表格/表单的补充
表格/表单的补充表格补充分割线属性(html属性)rules="" (加在结构table里)说明:当给table添加分割线属性时,就不能给td添加css属性border属性。rules="groups/rows/cols/all/none" 添加分隔线属性(添加在table上的,html结构中的)rows:位于行之间的线条cols:位于列之间的线条all:位于行和列之间的线条none:没有线条groups:位于行组和列组之间的线条(必须和数据行分组、数...原创 2021-05-10 19:40:25 · 295 阅读 · 0 评论 -
过渡/2D变形属性/3D变形/动画
过渡 transition [tansition 过渡/转变] transition是 css的属性值在一定的时间内从一个状态渐渐变到另一个状态。transition需要添加触发条件,比如鼠标点击、鼠标滑入,获取焦点来改变元素css的属性值。 transition-property:元素中参与过渡的css属性 [propecty 属性,特性,财产] transition-duration:元素过渡的持续时间 transition-delay:元素 延迟过...原创 2021-05-16 14:16:52 · 433 阅读 · 0 评论 -
html基础
新页面打开原创 2021-04-27 10:16:10 · 123 阅读 · 0 评论 -
高度塌陷、万能清除法(高度塌陷)
高度塌陷: 父元素没有设置高度,其高度是由子元素的高度撑起来的,但子元素发生了浮动,导致父元素无法正确计算高度,其高度变成0, 发生高度塌陷。块元素名称{clear:both;创建公共类 class选择器,可以多次使用;(.clearfix),有定位(relative与absolute)的元素会被隐藏。优点:没有兼容问题。缺点:结构里会有很多无用的空标签。overflow:hidden属性。前父元素下的其它子元素不能有定位。(触发了BFC条件)在浮动元素末尾 添加。原创 2021-05-08 21:49:16 · 271 阅读 · 0 评论 -
BFC布局
只有块元素参与的;块元素格式化上下文(Block Formatting Context,触发BFC的元素会独立出来一个渲染区域让处于BFC内部的元素与外部的元素相隔离,使内外元素不会相互影响。简单来说:BFC能影响盒模型的渲染规范;简单来说: BFC就是形成一个独立的盒子,并且这个盒子里的布局不受外部影响,也不会影响到外部布局;原创 2021-05-11 22:27:28 · 77 阅读 · 0 评论 -
flex布局-xy轴,flex1, banner图,嵌套图片,底部问题
x y轴问题主轴默认是x轴,设置主轴(x轴)上子元素的排列(默认)主轴 换轴是y 轴,设置主轴(x轴)上子元素的排列;原创 2021-05-20 21:48:59 · 1114 阅读 · 0 评论 -
两种圣杯布局
左右盒子给个宽度;高度100%;中间的盒子 宽度不设置(块元素不设置宽度,默认宽度父元素的宽度(把溢出隐藏了,左右盒子浮动 不占位,所以要隐藏了)原创 2021-05-21 16:00:47 · 106 阅读 · 0 评论 -
定位、元素垂直水平居中的方法
static:默认值,无特殊定位1.相对定位 position:relative;参考点:原来的位置;原来的位置仍然占位,不脱流;2.绝对定位 position:absolute;参考点:带有定位的最近一级的父元素,都没有定位,以html为参考点;原来的位置不占位,脱流;3.固定定位 position:fixed;参考点:浏览器的可视窗口(浏览器的四条边);原来的位置不占位,脱流;4.粘性定位 position:sticky;(兼容性差)原创 2021-05-07 18:47:49 · 1625 阅读 · 0 评论 -
元素类型、元素隐藏
如:div, dl, dt, dd, ol, ul, (h1-h6), p, form, hr, table,tr ,td,等;置换元素在其显示中生成了框,这也就是有的内联元素(img,input)能够设置宽高的原因。置换元素(可替换元素):浏览器根据元素的标签和属性,来决定元素的具体显示内容。3:给当前元素和弟弟元素都添加display:inline-block;4:给当前元素和弟弟元素添加vertical-align:middle。1:给当前元素在结构上添加一个弟弟元素(必须和当前元素写在一行上)。原创 2021-05-06 20:01:54 · 1136 阅读 · 0 评论 -
溢出、清除浮动
auto:如果内容被修剪,溢出隐藏,溢出时隐藏并且显示滚动条,不溢出不显示滚动条;pre:空白(空格、Tab)会被浏览器保留且文本不换行,手动添加回车时会换行。pre-wrap:保留空白符(空格、回车、Tab)序列,但是正常的进行换行;pre-line:合并空白符(空格、Tab)序列,但是保留换行符(回车);hidden:内容会被修剪,溢出隐藏,并且多余内容是不可见的;scroll:内容会被修剪,溢出隐藏,但是元素会显示滚动条;溢出内容为隐藏:overflow:hidden;原创 2021-05-06 18:35:12 · 442 阅读 · 0 评论 -
盒模型、浮动
css定义所有的元素都是一个盒子,都包含边框(border)、外边距(margin)、内边距(padding)、内容区(content)组成。原创 2021-05-04 18:31:59 · 84 阅读 · 0 评论 -
css属性
组成一个值,如: {font:26px/16px "宋体";}, { font:26px/16px "宋体";list-style-type:disc(实心圆)/circle(空心圆)/square(实心方块)/none(去掉列表符号);list-style-position:outside(外边,默认值)/inside(里边);为标准字体大小默认值,即1em.默认情况下,1em=16px,0.75em=12px;可单独设置一方向边框,border-top:边框宽度 边框类型 边框颜色;原创 2021-04-29 17:45:42 · 1243 阅读 · 0 评论 -
css基础
如:css中: #div1{width:300px;如:div::after{content:url(logo.jpg);选择符::after{content:url(图片路径);}鼠标悬停,即鼠标划过超链接时的状态;div::after{content:"文本内容";div::before{content:"在其前放内容";css中用四位数字表示权重,权重的表达方式如:0,0,0,0。语法:选择符::after{content:”文字”;h1,p,#div1,.box1{属性:属性值;原创 2021-04-28 22:17:12 · 866 阅读 · 0 评论 -
css问题
父元素没有设置高度,父元素的高度,默认被子元素撑开,如果子元素设置浮动,子元素脱离文档流将无法撑开父元素, 导致父元素的高度丢失,就是我们说的高度塌陷问题。父元素一旦高度塌陷,则它下边的元素会向上移动, 导致整个页面的布局混乱。没有直接设置宽度,高度不需要考虑padding值撑大盒子的问题;解决方法一:给图片改变对齐方式(baseline以外的);原因:img标签(行内块元素)默认是和基线对齐的.第二个是鼠标滑过li中的a时,a里面ul的样式。行高等于字体的大小,消除文字的默认行距;原创 2021-05-08 08:16:40 · 60 阅读 · 0 评论