html+css学习心得
关注
分享
扫一扫
qq_33221699
这个作者很懒，什么都没留下…
展开
-
高度塌陷问题
出现的场景： 当子元素有浮动，父元素没有设置高度，或者设置的是最小高度的时候，父元素会出现高度塌陷问题。解决方法： 1.给父元素添加：overflow:hidden;弊端：overflow：hidden会隐藏超出父元素的内容2.利用伪类：.clear-fix:after{ content: ""; clear: both; display: block; he...原创 2018-11-16 15:46:18 · 96 阅读 · 0 评论 -
自定义字体和图标的使用
1.自定义字体：@font-face { /* 字体命名 */ font-family: "叶根"; src: url(../images/叶根友特色空心简体.ttf)}div { font-family: "叶根";}2，自定义图标（利用伪类使用）利用伪类来使用图标@font-face { font-family: "ico...原创 2018-12-05 10:43:12 · 279 阅读 · 0 评论 -
表格表单和统筹
css表格表单和统筹css：表格表单和统筹学习目标1、表单标签及属性高级 2、表格标签及属性高级 3、CSS统筹 4、BFC概念和应用场景一、表单标签及属性高级回顾：表单的作用：用来收集用户的信息的; 表单的组成：表单域： <form name="" method="get/post" action=""></form>表单控件 ： &...翻译 2018-12-03 10:00:11 · 367 阅读 · 0 评论 -
CSS垂直居中和水平居中方式
一。垂直居中1.单行文本实现居中：设置行高.box { width:200px; height:200px; line-height:200px;//实现单行文本居中 background:red; } .text { vertical-align: middle; }这种主要给...原创 2018-11-28 11:24:40 · 124 阅读 · 0 评论 -
媒体查询
方式一：集中在一张表里@media all and (max-width:1024px) { 1024到768px}@media all and (max-width:760px) { 414px-786之间}@media all and (max-width:414px) { 0-414px之间的}方式二：每个样式一张表，引入方式<...原创 2018-12-04 20:02:08 · 119 阅读 · 0 评论 -
弹性盒模型
弹性盒模型：display:flex父元素里的属性： 1.display:flex;设置弹性盒模型 2.flex-direction 设置弹性盒模型的主轴方向 取值： row(默认值)，从左到右 row-reverse 从右到左 column 垂直排列，从上到下 column-reverse 从下到上 ...原创 2018-12-04 14:23:55 · 100 阅读 · 0 评论 -
浏览器内核 ，过滤器和IE6下最小高度的设置
1.有哪些浏览器， 他们的内核 和 css3前缀分别为什么（至少4个） 名称 内核 前缀IE Trident -ms-谷歌 Webkit -webkit-火狐 Gecko -moz-欧朋 Presto -o-1.过滤器：(1)_ 在属性前面添加，表示ie6以下的浏览器识别 (2...原创 2018-12-02 14:36:10 · 293 阅读 · 0 评论 -
margin重叠和塌陷的问题 和行内块出现间隙
1.解决margin重叠的问题（两个盒子之间设置margin出现重叠） <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style&原创 2018-12-02 13:12:15 · 466 阅读 · 1 评论 -
input-palceholder的默认字体颜色及，select下拉去掉三角按钮 置换元素有哪些？
1.select去掉三角按钮/* 去掉select右边的三角形 */ -webkit-appearance: none;2改变默认字体颜色:-moz-placeholder { color: #a9a9a9;} ::-moz-placeholder { color: #a9a9a9;} input:-ms-i...原创 2018-11-29 10:02:56 · 438 阅读 · 0 评论 -
css常用清除基础样式
/*(1)清除默认样式*/html, body, ul, li, ol, dl, dd, dt, p, h1, h2, h3, h4, h5, h6, form, fieldset, legend, img,input{ margin:0; padding:0; }fieldset, img,input,button { border:0 none; padding:0;margin:0;o...原创 2018-11-19 20:34:57 · 1124 阅读 · 0 评论 -
css消除基础样式
一。移动端样式 /* 禁用iPhone中Safari的字号自动调整 */html { -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; /* 解决IOS默认滑动很卡的情况 */ -webkit-overflow-scrolling : touch;} /* 禁止缩放表单 */inp...转载 2018-11-19 12:46:02 · 596 阅读 · 0 评论 -
css三种样式表的创建和区别
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> @import url("原创 2018-11-15 09:38:01 · 881 阅读 · 0 评论 -
css权重
权重排序： 内联样式(1000) > id选择器(0100) > class选择器(0010) > 类型选择器(0001) > 继承（0000） * 当不同选择符的样式设置有冲突的时候，高权重选择符的样式会覆盖低权重选择符的样式。 例如：b .demo{ }的权重是1+10=11 ...原创 2018-11-15 09:35:03 · 92 阅读 · 0 评论 -
单行和多行文本出现省略号的实现
1.CSS部分 /*单行文本出现省略号*/ .div3{ width: 100px; overflow: hidden; text-overflow:ellipsis; white-space: nowrap; } /*多行文本出现省略号*/ .div4{ width: 100px; display: -webkit-box; -webkit-bo...原创 2018-11-16 16:41:04 · 105 阅读 · 0 评论 -
rem.js
!function() { var a = "@charset \"utf-8\";html{color:#000;background:#fff;overflow-y:scroll;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}html *{outline:0;-webkit-text-size-adjust:none;...原创 2019-03-15 14:28:11 · 125 阅读 · 0 评论