CSS3与HTML5
CSS3与HTML5相关
初心w50t2
一不小心就走过了这么多年
展开
-
display: flex 和 display: inline-flex区别与使用
display: inline-flex;原创 2024-03-05 11:48:34 · 1065 阅读 · 0 评论 -
HTML5基础
1.网页简介:Html4网页开发:html 结构 4.0Css ->样式 2.0Js 行为 用户交互HTML5结构 Html5样式 css3行为: API 都有所增强2.语义标签:常用新语义标签 表示导航 表示页眉 表示页脚 表示区块 表示文章 如文章、评论、帖子、博客 表示侧边栏 如文章的侧栏 表示媒介内容分组 与 ul > li 做个比...原创 2019-10-26 15:01:35 · 191 阅读 · 0 评论 -
overflow-y: auto;解决页面出现滚动条导致背景色未铺满的情况
前端页面会遇到页面要设置全局背景色,但是一旦内容过多,页面出现滚动条,就会发现,怎么滚动到下面,背景色不是全部铺满的,超出一屏的内容是没有背景色的。这时候就可以给页面最外层标签加上。就会发现背景色被完全铺满了。原创 2023-04-20 17:46:27 · 2195 阅读 · 0 评论 -
css局域样式使用scoped,防止样式污染
使用scoped可以使当前页面定义的样式局域化,不会污染其他页面的样式,原创 2023-03-09 17:01:16 · 188 阅读 · 0 评论 -
css实现单侧阴影
box-shadow实现单侧阴影效果:.top { box-shadow: 0px -10px 10px -10px rgba(18, 21, 38, 0.3); } .right { box-shadow: 10px 0 10px -10px rgba(18, 21, 38, 0.3); } .bottom { box-shadow: 0 10px 10px -10px rgba(18, 21, 38, 0.3); } .left { box-shadow: -10px 0 1原创 2022-05-07 16:29:32 · 1555 阅读 · 1 评论 -
父元素设置了圆角,子元素没有设置圆角,子元素的直角会遮挡住父元素的圆角
父元素设置了圆角,子元素没有设置圆角,子元素的直角会遮挡住父元素的圆角在开发时,我们经常会遇到给父元素设置了圆角,但子元素没有设置圆角,子元素的直角会遮挡住父元素的圆角的问题,如何解决这个问题呢,只需要给父元素加上**overflow: hidden;**就好了;其实道理也很简单,仔细想想你就懂了;...原创 2022-03-22 14:34:35 · 1821 阅读 · 1 评论 -
position: sticky兼容iPhone6s,iPhone7
position: sticky;粘性定位在开发小程序的时候,经常会遇到需要实现吸顶的效果,势必会用到position: sticky;粘性定位;但是也会遇到一些问题;即在安卓手机和苹果手机上显示正常,但是在iPhone6s,iPhone7上会出现了吸不住顶的问题,使用如下代码即可解决;使用:position: sticky;position: -webkit-sticky;代替:position: sticky;...原创 2021-12-28 17:47:35 · 1136 阅读 · 0 评论 -
前端父元素设置绝对定位,子元素设置的flex不生效
当父元素设置绝对定位,子元素设置的flex会不生效,解决办法是给父级加一个width:100%;原创 2021-07-21 10:01:32 · 975 阅读 · 0 评论 -
flex:1;会占满父级剩余空间
原创 2021-03-23 10:38:53 · 580 阅读 · 0 评论 -
css弹性布局实现水平居中对齐
块元素垂直居中问题采用 flex 解决。行内元素垂直居中问题解决如下:1)单行该元素 css 属性 line-height 的值与该元素的父级元素 css 属性 height 一致即可。2)多行设置该元素 css 属性:display: table-cell; vertical-align: middle;,还需设置该元素的父级元素 css 属性:display: table;...原创 2021-03-11 16:36:15 · 2543 阅读 · 0 评论 -
css在有透明度的元素上层展示文本
原创 2021-03-11 16:09:33 · 126 阅读 · 0 评论 -
css实现多列布局,中间用样式相隔
1,使用column布局:效果图:代码:<!DOCTYPE html><html><head><meta charset="utf-8"> <title>菜鸟教程(runoob.com)</title> <style> .newspaper{ column-count:3; column-gap:40px; column-rule:1px solid #999;}.newspaper div{原创 2021-03-11 16:00:26 · 460 阅读 · 0 评论 -
CSS3基础
1.1选择器CSS3新增了许多灵活查找元素的方法,极大的提高了查找元素的效率和精准度。CSS3选择器与jQuery中所提供的绝大部分选择器兼容。1.1.1 css3新增选择器div>p: 子代选择器div+p: 相邻兄弟选择器,div后面相邻的第一个pdiv~p: 通用兄弟选择器,div后面所有的兄弟p属性选择器:标志性符号:[]^: 开头 :结尾∗:包含...原创 2019-10-26 17:00:34 · 620 阅读 · 0 评论