![](https://img-blog.csdnimg.cn/20201014180756925.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
html
努力_才幸福
前端小菜鸟一枚,正在努力的重生
展开
-
CSS样式中,文字对不齐的解决办法
text-align:justify;(向两侧对齐,最后一行无效)text-align:规定元素中的文本的水平对齐方式,原创 2019-12-16 14:03:17 · 2809 阅读 · 0 评论 -
justify-content属性
justify-content:用于设置或检测弹性盒子元素在主轴(横轴)方向上的对齐方式。flex-start:位于容器的开头;flex-end:位于容器的结尾;center:位于容器的中心;space-between:位于各行之间留有空白的容器内;space-around:位于各行之前、之间、之后都留有空白的容器内;initial:设置该属性为它的默认值;inheri...原创 2019-06-28 15:17:22 · 1281 阅读 · 0 评论 -
css中align-items属性
align-items:定义flex子项在flex容器的当前行的侧轴(纵轴)方向上的对齐方式值:1.stretch:默认值。元素被拉伸以适应容器。2.center:素位于容器的中心。3.flex-start:元素位于容器的开头.4.flex-end:元素位于容器的结尾。5.baseline:元素位于容器的基线上。6.initial:设置该属性为它的默认值.7.inh...原创 2019-07-02 09:57:07 · 3643 阅读 · 0 评论 -
页面滑动到底部自动加载下一页
页面滑动用到了jq的scroll事件。在此之前需要了解下面几个知识: $(window).scrollTop() 获取的是滚动条的垂直偏移 $(document).height() 获取的是文档的高度 $(window).height() 获取的是窗口的可视区域的高度ps:当你改变窗口的时候,$(window).height()会随着窗口的改变而改变,但$(doc...转载 2019-06-20 09:59:50 · 3030 阅读 · 0 评论 -
css3属性text-overflow:ellipsis的用法与注意之处
1.单行文本text-overflow:clip | ellipsis默认值:clip适用于:所有元素clip:当对象内文本溢出时不显示省略标记(...),而是将溢出的部分裁切掉。ellipsis:当对象内文本溢出时显示省略标记(...)。当值为ellipsis,有时不会出现(...),这是因为使用ellipsis的时候必须配合overflow:hidden;white-s...转载 2019-03-13 11:25:17 · 2606 阅读 · 0 评论 -
position的四个属性值:static,fixed,absolute和relative
1.static(静态定位):默认值。没有定位,元素出现在正常的流中(忽略 top,bottom,left,right或者z-index的声明);2.relative(相对定位):生成相对定位的元素,通过top,bottom,left,right的设置相对于其正常(原先本身)的位置进行定位,可通过z-index进行层次分级。3.absolute(绝对定位):生成绝对定位的元素,相对于 st...原创 2019-01-23 17:49:39 · 568 阅读 · 0 评论 -
input与label联合使用的两种方式
当用户选择label标签时,浏览器会自动将焦点转移到个label相关的input上1.通过为input设置属性id,在label标签中设置for=id使label文本与对应的inpu他结合起来。<label for="name">Name:</label><input id="name" type="text"/>2.label标签包裹input..转载 2018-11-08 14:15:18 · 37139 阅读 · 0 评论 -
给table加边框
1)border= “1”:给整个表格(包括表格及每一个单元格)加上1像素的黑色边框,其等同于css中的: table,table tr th, table tr td { border:1px solid #0094ff; }2)cellpadding = "0":单元格边距等于0,其默认值为1px,其等同于css中的:{padding:0;}3)cellspacing="0":...转载 2018-11-13 18:17:48 · 2193 阅读 · 0 评论 -
css的clear属性
clear 属性规定元素的哪一侧不允许出现浮动元素,{float:left,clear:both},即该元素的左右两边不允许出现浮动元素原创 2018-11-08 10:48:34 · 139 阅读 · 0 评论 -
code标签:显示的字体为等宽字体
<code class="hashBodyClass" style="font-size:14px;color:#ccc;background-color:transparent;cursor:pointer;word-break:break-all;white-space: pre-wrap;" >XXXXXXXXX</code>原创 2018-07-15 10:52:24 · 2180 阅读 · 0 评论 -
分析浏览器渲染css机制
分析上图的渲染机制有什么不同: 如果直接使用变迁来定义样式,在css渲染时浏览器需要先查找DOM节点,而添加类名不需要查找dom节点。知识点: 浏览器对css的匹配原理:浏览器css匹配不是从左到右进行查找,而是从右到左进行查找,比如之前说的div#divBox p span.red{color:red}。浏览器的查找顺序如下: 先查找html中所有clas...原创 2018-07-19 09:59:14 · 683 阅读 · 0 评论 -
css中中英文换行,超出省略
1.word-wrap:a.normal 在半角空格或连字符的地方进行换行b.break-word 不截断英文单词换行2.word-break:a.normal 中文到边界上的汉字换行,英文从整个单词换行b.break-all 强行截断英文单词换行c.keep-all 不允许字断开3.white-space:a.normal 默认值b.pre...原创 2018-06-28 17:28:44 · 3986 阅读 · 0 评论 -
css去掉inline-block元素间隙的几种方法
间隙是由换行或者回车导致的,只要把标签写成一行或者标签直接没有空格就不会出现间隙。移除inline-block元素间隙方法(1)移除标签间的空格元素间的间隙出现的原因是元素标签之间的空格,把空格去掉间隙自然就会消失。来看以下几种写法:*写法一:<div class="demo"> <span>我是一个span</span><span>...原创 2018-06-19 10:58:24 · 2770 阅读 · 0 评论 -
css中自适应表格连续字符换行以及单行溢出点点点的显示
让连续的英文数字字符换行:word-break:break-all让单行文字超出的时候使用点点点:white-space: nowrap; overflow: hidden; text-overflow: ellipsis;如果是自适应表格的时候,要实现上面的两个效果,可能就会遇到挫折:解决方法:给最外面的table标签增加一个声明:table-layout: fixed;作用在于,让表格布局固定...原创 2018-06-08 11:11:36 · 1023 阅读 · 0 评论 -
css中z-index层级无效的问题
z-index无效的情况:1.父元素position属性为relative;2.问题标签没有无position属性(不包括static);3.问题元素含有浮动元素解决方法:1.position:relative改为position:absolute2.浮动元素添加position属性;3.去除浮动https://blog.csdn.net/apple_01150525/article/detail...转载 2018-05-28 11:23:45 · 5611 阅读 · 0 评论 -
a标签置灰不可点击
a标签的title属性可以实现鼠标放上去显示信息的功能:<a title="编辑" href ="javascript:return false;" onclick="return false;" style="cursor: default;"> <i class="edit" style="opacity: 0.2">&a原创 2018-05-28 09:59:39 · 31395 阅读 · 3 评论 -
table中rowspan和colspan
colspan:横向跨列,使用在td标签中,指定单元格横跨列数colspan=‘2’rowspan:纵向跨行,使用在td标签中,指定单元格纵跨行数数rowspan=‘2’原创 2018-05-08 11:27:31 · 1051 阅读 · 0 评论 -
css的zoom属性
zoom这个属性是ie专有属性,除了设置或者检索对象的缩放比例之外,它还有可以触发ie的haslayout属性,清除浮动,清除margin重叠等作用。 不过值得注意的一点就是火狐浏览器不支持zoom属性,但是在webkit内核浏览器中zoom这个属性也是可以被支持的。 (1)下面我们来看下zoom在非IE浏览器中的作用:看下面的例子,我是在谷歌浏览器下访问的,在该例子中zoom的作用是放大...转载 2018-05-14 17:48:54 · 453 阅读 · 0 评论