页面布局
文章平均质量分 80
JJ_Smilewang
这个作者很懒,什么都没留下…
展开
-
jQuery常用API--属性操作
所谓元素固有属性指的就是元素本身自带的属性,比如元素里面的href,元素里面的type,里面的src等属性。用户自己给元素添加的属性,称之为自定义属性。比如给div 添加index ="2"data() 方法可以在指定的元素上存取数据,并不会修改DOM元素结构(也就是说存放的数据,在DOM树上是看不见的),而且一旦页面刷新,之前存放的数据都将被移除。...原创 2022-07-02 15:42:43 · 818 阅读 · 0 评论 -
响应式布局
1. 响应式布局原理所谓响应式布局,就是随着屏幕宽度的不同,呈现出不同的布局样式,它是通过使用媒体查询,针对不同宽度的设备进行布局和样式实现的。2. 响应式布局容器响应式需要一个父级做为布局容器,来配合子级元素来实现变化效果。原理就是在不同屏幕下,通过媒体查询来改变这个布局容器的大小,再改变里面子元素的排列方式和大小,从而实现不同屏幕下,看到不同的页面布局和样式变化。平时我们的响应式尺寸划分①小屏幕(手机,小于 768px):设置容器宽度为 100%②小屏幕(平板,大于等于 .原创 2022-04-20 14:00:00 · 1334 阅读 · 0 评论 -
CSS3 媒体查询
1. 什么是媒体查询CSS3媒体查询(Media Query)语法的特性:①使用 @media 查询,可以针对不同的媒体类型定义不同的样式;②@media 可以针对不同的屏幕尺寸设置不同的样式;③当你重置浏览器大小的过程中,页面也会根据浏览器的宽度和高度重新渲染页面 ;④目前针对很多苹果手机、Android手机,平板等设备都用得到多媒体查询.2. 媒体查询的语法规范@media mediatype and|not|only (media feature) { /* CSS原创 2022-04-19 14:00:00 · 7080 阅读 · 0 评论 -
em和rem单位
我们在制作web端页面时,基本都是使用像素px作为单位,但是我们知道移动端设备具有多种多样的宽度,而使用物理单位在不同宽度和不同分辨率的手机上会有一定差异,那么在某些设备可能就会出现页面不美观的问题。所以为了解决此问题,移动端推荐使用rem作为单位。我们知道还有个常见单位是em,那么它们之间有什么区别呢?1.em单位em是一个相对单位,是相对父元素字体大小的。<style> div { font-size: 18px; /* 设置父元素的字体大小 *原创 2022-04-18 14:00:00 · 1164 阅读 · 0 评论 -
flex布局(二)
我们上篇文章主要介绍了flex布局中写在父元素上的常见属性,今天则给大家介绍下flex布局中子项常见属性。1. flex-grow 定义项目的放大比例flex-grow属性是定义项目的放大比例,也可以理解为表示占多少份数。主要作用是:分配剩余空间的。/* flex-grow: <number>; 属性值为非负数 */flex-grow:0; /* 默认值为0,表示即使存在剩余空间,也不放大 */①如果给其中一个子项 设置 flex-grow: 1; 则表示这个项目.原创 2022-04-17 14:00:00 · 243 阅读 · 1 评论 -
flex 布局(一)
1.初识flex布局所谓的flex 是 flexible Box 的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性,任何一个容器都可以指定为 flex 布局。但是需要注意:①当我们为父盒子设为 flex 布局以后,子元素的 float、clear 和 vertical-align 属性将失效。②伸缩布局 = 弹性布局 = 伸缩盒布局 = 弹性盒布局 =flex布局采用 Flex 布局的元素,称为 Flex 容器(flex container),简称"容器"。它的所有子元素自动成为容原创 2022-04-16 14:00:00 · 2034 阅读 · 0 评论