CSS
文章平均质量分 57
木木学长
这个作者很懒,什么都没留下…
展开
-
CSS—过渡
过渡(transition)是CSS3中具有颠覆性的特性之一,我们可以在不使用Flash动画或JavaScript的情况下,当元素从一种样式变换为另一种样式时元素添加效果。过渡动画:是从一个状态渐渐的过渡到另一个状态。低版本浏览器不支持,但是不影响页面布局。经常和:hover一起搭配使用。transition:要过渡的属性 花费的时间 运动曲线 何时开始;1、属性:想要变化的css属性,宽度高度,背景颜色,内外边距都可以。如果想要所有的属性都变化过渡,写个all就可以2、花费时间原创 2021-03-23 19:58:17 · 213 阅读 · 0 评论 -
CSS—新增属性选择器
CSS3给我们新增了选择器,可以更加便捷,更加自由的选择目标元素:属性选择器结构伪类选择器伪元素选择器1 属性选择器属性选择器可以根据元素特定的属性来选择元素,这样就可以不用借助于类或者id选择器。类选择器,属性选择器,伪类选择器权重为10.<style> input[value]{ color:pink; }</style>2 结构伪类选择器结构伪类选择器主要根据文档结构来选择元素,常用于根据父级选择器里面的元素。ul li:first-child原创 2021-03-23 17:09:11 · 257 阅读 · 0 评论 -
CSS—新增标签标签
1 语义化标签以前的布局基本用div来做,div对于搜索引擎来说,是没有语义的。HTML5新增语义化标签:header头部标签nav导航标签article内容标签section定义文档某个区域aside侧边栏标签footer尾部标签在IE9中需要将这些元素转换为块级元素2 新增多媒体标签新增的多媒体标签主要包含两个:1、音频:<audio>2、视频:<video>使用它们可以很方便的在页面中嵌入音频和视频,而不再去使用flash和其他浏览器插件。(原创 2021-03-23 15:58:50 · 803 阅读 · 0 评论 -
CSS—三角
网页中常见的一些三角形,使用CSS直接画出来就可以,不必做成图片或者字体图标:<!DOCTYPE html><html lang="en"><head> <style> .box1 { width: 0; height: 0; border-top: 10px solid pink; border-right: 10px solid原创 2021-03-22 11:18:45 · 68 阅读 · 0 评论 -
CSS—浮动
1 传统网页布局的三种方式CSS提供了三种传统布局方式:标准流(普通流/文档流)浮动定位标准流(普通流/文档流)所谓的标准流就是标签按照规定好默认方式排列:块级元素会独占一行,从上向下顺序排列行内元素会按照顺序,从左到右顺序排列,碰到父元素边缘则自动换行。2 浮动(1)什么是浮动float属性用于创建浮动框,将其移动到一边,直到左边缘或右边缘触及包含块或另一个浮动框的边缘: <style> .a1, .a2 {原创 2021-03-22 01:15:23 · 192 阅读 · 0 评论 -
CSS—解决外边距塌陷
嵌套块元素垂直外边距的塌陷对于两个嵌套关系(父子关系)的块元素,父元素有上外边距同时子元素也有上外边距,此时父元素会塌陷较大的外边距值: <div class="a"> <div class="b"></div> </div>解决方案:可以为父元素定义上边框可以为父元素定义上内边距可以为父元素添加overflow:hidden<style> .a { width: 100px;原创 2021-03-20 16:32:36 · 166 阅读 · 0 评论 -
CSS—三大特性
1 层叠性相同选择器设置相同的样式,此时一个样式就会覆盖另一个冲突的样式,层叠性主要解决样式冲突的问题。2 继承性子标签会继承父标签的某些样式,如文本颜色和字号恰当地使用继承可以简化代码,降低CSS样式的复杂性子元素可以继承父元素的样式(text-,font-,line-这些元素开头的可以继承,以及color属性)3 优先级当同一个元素指定多个选择器,就会有优先级产生选择器相同,则执行层叠性选择器不同,则根据选择器权重执行选择器权重如下表所示:选择器权重继承原创 2021-03-20 10:39:40 · 66 阅读 · 0 评论 -
CSS—元素的显示模式
元素显示模式就是元素(标签)以什么方式进行显示,比如div自己占一行,span一行可以放多个。1 块元素常见的块元素有<h1>~<h6>、<p>、<div>、<ul>、<ol>、<li>等,块级元素的特点:独占一行高度、宽度、外边距以及内边距都可以控制宽度默认是容器(父级宽度)的100%是一个容器及盒子,里面可以放行内或者块级元素文字类的元素不能使用块级元素,如p标签主要用于存放文字,因此p里面不能放块级元素原创 2021-03-19 23:40:22 · 569 阅读 · 0 评论 -
CSS—复合选择器
在CSS中,可以根据选择器的类型把选择器分为基础选择器和复合选择器,复合选择器是建立在基础选择器之上,对基本选择器进行组合形成的。常用的复合选择器包括:后代选择器、子选择器、并集选择器、伪类选择器。1 后代选择器后代选择器又称为包含选择器,可以选择父元素里面的子元素,其写法就是把外层标签写在前面,内层标签写在后面,中间用空格分隔,当标签发生嵌套时,内层标签就成为外层标签的后代。ol li{ color:red;}2 子元素选择器子元素选择器(子选择器)只能选择作为某元素的最近一级子元素,简单原创 2021-03-19 23:04:25 · 131 阅读 · 0 评论 -
CSS—基础选择器
选择器就是根据不同需求把不同的标签选出来,简单来说就是选择标签用的。选择器分为基础选择器和复合选择器两个大类,基础选择器由单个选择器组成,基础选择器又包括:标签选择器,类选择器,id选择器和通配符选择器。1 标签选择器标签选择器(元素选择器)是指用HTML标签名称作为选择器,按标签名称分类,为页面中某一标签指定统一的CSS样式:<style> p { color:pink; } div { color:green; }</style>2 类选择器如果想原创 2021-03-19 07:42:04 · 138 阅读 · 0 评论 -
CSS—表单
1 表单域表单域是一个包含表单元素的区域,在HTML标签中,<form>标签用于定义表单域,以实现用户信息的收集和传递。<form>会把它范围内的表单元素信息提交给服务器。<form action="url地址" method="提交方式" name="表单域名称"> 各种表单元素控件</form>属性属性值作用actionurl地址用于指定接收并处理表单数据的服务器程序的url地址methodget/post用原创 2021-03-18 22:21:48 · 648 阅读 · 0 评论 -
less+rem+媒体查询
问题:1、页面布局文字能否随屏幕大小变化而变化2、流式布局和flex布局主要针对于宽度布局,那高度如何设置3、怎么让屏幕发生变化的时候元素高度和宽度等比例缩放rem基础:rem(root em)是一个相对单位,类似于em,em是父元素字体大小。不同的是rem的基准是相对于html元素的字体大小。比如,根元素(html)设置font-size=12px;非根元素设置width:2rem;则换成px表示就是24px;rem的优点就是可以通过修改html里面的文字大小来改变页面中元素的大小可以整体控原创 2021-01-30 11:21:50 · 555 阅读 · 1 评论 -
CSS移动端开发基本介绍
(1)国内的UC和QQ,百度等手机浏览器都是根据Webkit修改过来的内核,国内尚无自主研发的内核。兼容移动端主流浏览器,处理Webkit内核浏览器即可。(2)视口(viewport)就是浏览器显示页面内容的屏幕区域。视口可以分为布局视口、视觉视口和理想视口。布局视口:一般移动设备的浏览器都默认设置了一个布局视口,用于解决早期PC端页面在手机上显示的问题。IOS,Android基本都将这个视口分辨率设置为980px,所以PC上的网页大多都能在手机上呈现,只不过元素看上去很小。视觉视口:是用户正在看到的原创 2021-01-23 11:30:47 · 415 阅读 · 0 评论 -
flex布局
传统布局与flex布局:传统布局:兼容性好、布局繁琐、局限性,不能再移动端很好的布局flex布局:操作方便,布局极为简单,移动端应用广泛,PC端浏览器支持情况较差,IE11或更低版本不支持或部分支持flex布局原理:flex是flexible Box的缩写,意为弹性布局,用来为盒状模型提供最大的灵活性,任何一个容器都可以指定为flex布局当我们为父盒子设为flex布局以后,子元素的float、clear和vertical-align属性将失效。伸缩布局=弹性布局=伸缩盒布局=弹性原创 2021-01-25 16:27:27 · 123 阅读 · 0 评论