CSS、bootstrap4等相关疑难杂症

说明本篇博客仅用于个人随笔,所以内容比较随意. 在bootstrap4中,引入样式后,按钮.输入框等组件的选取状态会出现黑色加重边框,该如何解决? 解决示例: input:focus{outline: none;} 输入框.按钮组件如何居中? 解决方法:在CSS调整外边距为auto.即margin: auto; CSS中组件阴影效果应该调整哪个属性? 答:box-shadow.该属性仅在高版本的chrome.firefox等浏览器中生效(备注:360.百度等浏览器使用了chrome内核) 如何…

css图片的相关操作

css图片的相关操作 1.案例源码 <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title></title> <style> *{margin: 0;padding: 0} body{width: 95.2%;margin: 5px auto;} .image{border: 1px solid dark…

amazeui学习笔记--css（布局相关1）--网格Grid

amazeui学习笔记--css(布局相关1)--网格Grid 一.总结基本使用 1.div+class布局:amaze里面采取的就是div+class的布局方式 <div class="am-g am-g-collapse"> 2.网格布局中的行和列:.am-g .am-u-xx-n 3.3种尺寸:sm md lg 4.从普通css到amaze: .am-g { margin: 0 auto; width: 100%; } .am-g-fixed { max-wi…

amazeui学习笔记--css（布局相关3）--辅助类Utility

amazeui学习笔记--css(布局相关3)--辅助类Utility 一.总结 1.元素清除浮动: 添加 am-cf 这个 class 即可 2.水平滚动: .am-scrollable-horizontal 内容超出容器宽度时显示水平滚动条. <div class="am-scrollable-horizontal"> 3.垂直滚动: .am-scrollable-vertical 4.浮动相关: .am-cf - 清除浮动 .am-fl - 左浮动 .am-fr …

amazeui学习笔记--css（布局相关2）--等分网格 AVG Grid

amazeui学习笔记--css(布局相关2)--等分网格 AVG Grid 一.总结 1.与grid区别:网格中:am-g + am-u-xx-n 等分网格中只有一个: am-avg-sm-4(在ul中,里面有li) 记住这个avg(表示等分网格) 这里数字的意思不一样,这里的数字表示几等份 2.基本使用:被ul和li统治 <ul class="am-avg-sm-4 am-thumbnails"> <li><img class="am-thu…

css基础-css选择器和css文本样式相关

css基础-css选择器和css文本样式相关: 使用link链入外部样式,页面加载时会同时加载样式 @import url(“*.css”);使用导入式,页面加载完后,才会加载样式链接伪类的顺序 :link-> :visited ->:hover-> :active 或者 : visited -> : link ->:hover-> :active 选择器的优先级: id选择器>class选择器>标签选择器如果设置了同样的类样式,类样式与元素里类的顺序没…

整理CSS引发的相关理论的梳理

写在前面因为原先项目中的CSS样式乱得不行,所以领导决定要花大时间整理一下样式,也为了后续维护起来方便.其实也苦了自己,想想也是一件多烦的事情,烦的原因并非是说这件事情做起来没有意义,而是觉得这样的事情不需要任何技术含量,按照定下来的一套准则然后ctrl+c和ctrl+v就可以了. 如果真这样想,那还真是大错特错了.拿个很简单的比喻来说吧,同样是手机,有些手机一两百却没有人要,而苹果那么贵还是有那么多人争先恐后的跑去买.原因在哪? 把平凡简单的事情做到最好才是最重要的. 为了把项目的样式整理好…

css margin的相关属性，问题及应用

by zhangxinxu from http://www.zhangxinxu.com本文地址:http://www.zhangxinxu.com/wordpress/?p=48 引言:margin为css中非常常用的一个属性,其所包含的内容也是很多的.本文主要分三部分对margin做一些分析叙述,包括其属性,使用过程中会遇到的问题,以及一些高级应用等.对于JavaScript与margin的控制表达这里不叙述. 导航:一.margin的相关属性二.margin常见的问题1.IE6下双边距问题…

响应式开发(四)-----Bootstrap CSS----------Bootstrap CSS概览和相关注意事项

本章先记录一些与Bootstrap CSS相关的一些特点和注意事项以及兼容性. HTML 5 文档类型(Doctype) Bootstrap 使用了一些 HTML5 元素和 CSS 属性.为了让这些正常工作,您需要使用 HTML5 文档类型(Doctype). 因此,请在使用 Bootstrap 项目的开头包含下面的代码段. <!DOCTYPE html> <html> .... </html> 如果在 Bootstrap 创建的网页开头不使用 HTML5 的文档类型(…

CSS之属相相关

一.padding与margin padding:就是内边距的意思,它是边框到内容之间的距离另外padding的区域是有背景颜色的.并且背景颜色和内容的颜色一样.也就是说background-color这个属性将填充所有的border以内的区域有关padding 的使用: padding有四个方向,分别描述4个方向的padding. 1.写小属性,分别设置不同方向的padding padding-top: 30px; padding-right: 30px; padding-bottom:…

css的其他相关样式属性

一.颜色 1.预定义的表示颜色的单词 red,black.gray,pink...... 2.16进制表示 # + 6位16进制的数字0 1 2 3 4 5 6 7 8 9 a b c d e f 如果两两一样可以合并成3个数字 #fff; 3.rgb rgb(,,)0-255的数 4.rgba rgba(,,,)前三个是0-255的数,最后一个是0-1的数有时候a不起作用,我们会用透明度来调节0是全透明1是不透明二.一些其他的相关属性 line-height:20px;//指定每行的高度…

CSS基础定位相关属性的使用方法

1.相对定位:position:relative: 属性名:position 属性值:relative: 特点:1.相对自己的位置移动 2.配合方位名词移动,如:top.left.right,bottom 3.相对定位,位置虽然移动了,但原来的位置还在,并未脱标应用场景: 1.配合绝对定位使用(子绝父相) 2.小范围的移动使用 2.绝对定位:position:absolute: 特点:1.默认相对浏览器可视化区域的边缘移动,如果父级以及以上级有定位,则相对最近的一个级定位 2.配合方位名词移动…

css文本换行相关属性及解释

本文摘自 http://www.wufangbo.com/css-qiang-zhi-huan-hang/ 强制换行与强制不换行用到的属性我们一般控制换行所用到的CSS属性一共有三个:word-wrap; word-break; white-space.这三个属性可以说是专为了文字断行而创造出来的.首先我们得知道这三个属性到底是做什么用地: word-wrap语法: word-wrap: normal(默认) | break-word各个浏览器均能识别参数: normal: 允许内容顶开指定…

CSS Float 以及相关布局模式

float 取值属性值描述 left 向左浮动 right 向右浮动 none 默认值 inherit 继承看一个栗子红色线框代表父元素脱离文档流,其实也没有完全脱离,会被父元素的边界挡住. float的元素在同一文档流看一个栗子: 红线框代表父元素三个子元素『向左浮动』之后, 父元素就没有内容了,所以父元素没有高度了. float元素半脱离文档流对元素,脱离文档流:对内容,在文档流.元素时会重叠,但是内容不会重叠. 举个栗子: <!DOCTYPE html>…

css 盒模型相关样式

话不多说,一切还是从最基础的说起. 盒的类型 1.盒的基本类型在css中,用display定义盒的类型,一般分为block类型与inline类型. 例如div属于block类型,span属于inline类型 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style typ…

CSS float的相关图文详解（二）

最近这段时间有些忙,一直没有写关于如何清除浮动的,现在终于抽出时间了,还是那句话,如果哪里有错误或者错别字,希望大家留言指正.我们一起进步! 在CSS中,我们通过float属性实现元素的浮动.浮动框旁边的行框被缩短,从而给浮动框留出空间,行框围绕浮动框,因此,创建浮动可以使文本围绕图像: 例如: 如果想要阻止行框围绕浮动框,就需要对该框应用 clear 属性. clear属性规定元素的哪一侧不允许有其他浮动元素,也就是说表示框的哪些边不应该挨着浮动框.其值有: left:元素左侧不允许有浮动元素…

CSS float的相关图文详解（一）

大家好,作为一个刚入门的小前端,第一次写博客,很是鸡冻.由于涉猎较浅,有些知识可能说的不清楚,或者有什么错误,欢迎留言指正.我的第一篇博客写的关于css的浮动的.想必很多小伙伴特别是刚学的,对浮动有一定的迷惑,当然了,并不是所有初学者都像我一样迷迷糊糊.哈哈,废话不多说,现在谈谈我对浮动的理解,更应该说是总结吧,还是那句话,如果哪里不对,请留言指出,这也是帮助我进步. 历史: 浮动最开始是为了实现文字环绕的效果,也就是说浮动最开始是用来做一些文字混排效果的. 浮动: 元素的浮动是指设置了浮动属…

css实现三角形相关

1.css样式面包屑导航条实现矩形和三角箭头拼接 .cssTest { font-family: PingFangSC-Regular; font-size: 16px; color: #333333; line-height: 40px; /* 左侧部分 */ .cssTest1 { width: 750px; height: 40px; background-color: #D3D8DF; position: relative; display: inline-block; } .cssTe…

CSS:与input相关的一些样式设置问题

input是HTML中非常重要,非常常用而又不可替代的元素,在于其相关的样式设置中有时会遇到其他元素不会发生的问题,今天把我印象中的一些小问题和解决方案记录一下. 1.与同行元素上下居中对齐关于上下居中的话题还是比较热门的,过几天也想专门总结一下元素各种上下居中的方法,今天简单说说关于input的特殊方法. 最推荐的是flex布局模式,掌握flex布局方式后会发现居中特别简单,而且在现代浏览器中都兼容这种布局方式. 对于块元素,可能自适应的居中方式需要绝对定位了, position:absol…

css 书目录相关css+html代码

css: <style type="text/css"> #list{width:500px;position:absolute;left:50%;margin-left:-250px;top:10px;} ul{width:500px;list-style:none;padding:0;margin:0;} li{position:relative;border-bottom: dotted 2px #999; padding: 41px 0 5px 0;} .anoth…

css字体属性相关。

出处:CSS 参考手册 http://www.w3school.com.cn/cssref/index.asp text-decoration 属性说明:这个属性允许对文本设置某种效果,如加下划线.如果后代元素没有自己的装饰,祖先元素上设置的装饰会“延伸”到后代元素中.不要求用户代理支持 blink. 可能的值描述none 默认.定义标准的文本.underline 定义文本下的一条线.overline 定义文本上的…

前端基础-CSS的属性相关设置

一字体属性二文本属性三背景属性四盒子模型五盒子模型各部分详解一. 字体属性 1.font-weight:文字粗细(表格中*为重点) 取值描述 normal 默认值,标准粗细 bord 粗体 * border 更粗 lighter 更细 100~900 设置具体粗细,400等同于normal,而700等同于bold * inherit 继承父元素字体的粗细值 2.font-style:文字风格 normal 正常,默认就是正常的 italic 倾斜 3.fo…

webpack@3.6.0（2） -- css及图片相关问题

本篇内容 css3前缀处理postcss 消除未使用的css部分图片处理 css分离和分离后的图片处理 css3前缀处理postcss cnpm i -D postcss-loader autoprefixer 在webpack.config.js中建postcss.config.js module.exports={ plugins:[ require('autoprefixer') ] } 在webpack.config.js中 { test:/\.css$/, //要匹配的文件后缀名 u…

css字体标签相关

斜体: i:斜体em:斜体,强调的意思,有特殊含义,尽量用i或者cssfont-style:字体风格 normal默认值,italic斜体,oblique倾斜的字体粗体: b,strong:粗体font-weight:字体粗细100~900, 其中400=normal,700=bold,还有bolder/lighter,比继承值更粗/更细. font-size:字体大小 font-family:字体样式 ,最好以unicode形式.综合字体设置选择器{font:font-style font-…

CSS之特性相关

一.css的继承性与层叠性继承性: 面向对象语言都会存在继承的概念,在面向对象语言中,继承的特点:继承了父类的属性和方法.那么我们现在主要研究css,css就是在设置属性的.不会牵扯到方法的层面. 继承:给父级设置一些属性,子级继承了父级的该属性,这就是我们的css中的继承. 记住:有一些属性是可以继承下来 : color . font-*. text-*.line-* .主要是文本级的标签元素. 但是像一些盒子元素属性,定位的元素(浮动,绝对定位,固定定位)不能继承层叠性: 层叠性: 权重…

CSS之选择器相关

一.选择器的作用选择器就是用来选择标签的,要使用css对HTML页面中的元素实现一对一,一对多或者多对一的控制,这就需要用到CSS选择器. HTML页面中的元素就是通过CSS选择器进行控制的.每一条css样式定义由两部分组成,形式如下: [code] 选择器{样式} [/code] 在{}之前的部分就是“选择器”. “选择器”指明了{}中的“样式”的作用对象,也就是“样式”作用于网页中的哪些元素二.选择器的分类选择器大体上可以分为两类:基本选择器.高级选择器及其它选择器基本选择器: 基本…

CSS基础阴影相关属性设置

一.字体阴影属性名:text-shadow:水平偏移量垂直偏移量模糊度阴影颜色: html代码: <div>农夫山泉有点甜</div>css代码: div{ font-size:100px; font-weight:700; text-align:center; line-height:300px text-shadow: 98px 79px 9px pink; /*水平偏移量垂直偏移量模糊度阴影颜色 */} 注意:1.水平偏移量可以为负数,模糊度和阴影颜色是可选的 2…

CSS基础盒子相关属性总结 padding+border

1.border当个属性: 作用属性名属性值边框粗细 border-width 数字+px 边框样式 border-style solid实线.dashed虚线.dotted点线边框颜色 border-color 颜色设置连写格式:1.border:20px solid green: /*增加宽度为20px的四周边框颜色为绿色的实线 */ 2.border-top:10px solid blue: /* 增加10px的上边框颜色为蓝色的实线*/ 3.border-bottom:5px…

css 3d 动画相关

transform-style: preserve-3d; 设置3D模式 perspective:700px :属性定义 3D 元素距视图的距离,以像素计.该属性允许您改变 3D 元素查看 3D 元素的视图.当为元素定义 perspective 属性时,其子元素会获得透视效果,而不是元素本身 perspective-origin:50% 50% :属性定义 3D 元素所基于的 X 轴和 Y 轴.该属性允许您改变 3D 元素的底部位置.当为元素定义 perspective-origin 属性时,其…

CSS 中蒙版相关设置二三事

写蒙版时会使用透明度,第一反应会使用 opacity 但这个会使子元素继承,蒙版内还有内容会被影响,从而会设置 background 属性的 rgba 值. 需要注意的是 rgba 和 gba 颜色值是 0 到 255 表示,而透明度则是 0 到 1 可设置.从而有时候需要注意这些小细节从而提升写代码的速度.…

【CSS、bootstrap4等相关疑难杂症】的更多相关文章