margin

微信小程序商品购物界面

由 五迷三道 提交于 2019-12-14 18:08:54
wxml代码 < view class = " page " > < view class = " page__bd " > < view class = " weui-tab " > < view class = " weui-navbar " > < block wx: for = " {{tabs}} " wx: key = " *this " > < view id = " {{index}} " class = " weui-navbar__item {{activeIndex == index ? ' weui-bar__item_on ' : ' ' }} " bindtap = " tabClick " > < view class = " weui-navbar__title " > {{item}} </ view > </ view > </ block > < view class = " weui-navbar__slider " style =" left: { { sliderLeft } } px ; transform: translateX( { { sliderOffset } } px ) ; -webkit-transform: translateX( { { sliderOffset } } px ) ; " > </ view > </

CSS（层叠样式表）基础

由 ♀尐吖头ヾ 提交于 2019-12-14 17:30:45
文章目录 背景样式 背景颜色 背景图片 图片重复方式 图片位置 图片附着 简写属性 伪类选择器 高级选择器 后代选择器 直接后代选择器 并列选择器 相邻兄弟选择器 盒子模型 边框 内边距 外边距 外边距合并 处理溢出的内容 改变元素的盒类型 浮动 背景样式 背景颜色 属性名 background-color 属性值 合法的颜色的名，比如： red ；十六进制值，比如： #ff0000 ；RGB 值，比如： rgb(255,0,0) 默认值 transparent 描述 设置背景颜色。 示例如下： .box { /* 下面 3 种写法是等价的 */ background-color : red ; background-color : rgb ( 255, 0, 0 ) ; background-color : #ff0000 ; } 背景图片 属性名 background-image 属性值 图片所在路径 默认值 none 描述 设置背景图片。 示例如下： .box { background-image : url("./cat.jpg") ; } 图片重复方式 属性名 background-repeat 属性值 repeat | repeat-x | repeat-y | no-repeat 默认值 repeat 描述 设置背景图片。 示例如下： .box { /* repeat

Padding of a certain percentage of screen width

由 假如想象 提交于 2019-12-14 04:00:17
问题 I have a main container div, and I'd like it to be margined from the top of the screen exactly, for example, 10% of the screen width. This way I won't have problems with non-uniform screen sizes etc.. I already found a dirty workaround which is putting a 1px by 1px image of the color of the background, right before the div, and then style it to have 10% of the width of the screen. But this looks quite dirty, doesn't it? Is there any better solution? 回答1: The solution I find very elegant is to

Is the CSS right?

由 ＊爱你＆永不变心＊ 提交于 2019-12-14 03:29:02
问题 Below is my CSS file and an image of what I'm referencing. In the picture, it's the 1st, but if it was the 10th, or any other 2-digit-day, would the 2013 or no? It's a dumb question, and I know, but I'm not sure about the whole margin, padding, position, and float factors. REPHRASED QUESTION: I'm not too good with padding and margins so maybe I'm asking the wrong question. The picture shows April 1 2013, great. But I'm wondering if April 10 (a 2nd-digit day) will make the 2013 shift RIGHT

Why no rule for un-collapsing margins

由 倾然丶 夕夏残阳落幕 提交于 2019-12-14 02:35:08
问题 There are circumstances under which elements' vertical margins will collapse. Sometimes the author doesn't want this to happen, and I understand that the only way to "un-collapse" margins is to: Set a border sized >= 1px Set a padding sized >= 1px These workarounds make sense to me, but they are just that: workarounds , and they have drawbacks. I'm surprised that there's not some kind of css3 property like margin-collapse: none; , similar to border-collapse . Is it really true that setting a

Keep transition effect on 1 div from moving the div that follows?

由 落爺英雄遲暮 提交于 2019-12-13 16:25:38
问题 1. I have a 4 column row of divs that move a little when hovered (with margin and padding). How can I keep this movement from moving the content that is below it without adding a fixed height . It is in a fluid layout so with a fixed height that allows enough room for the movement, the content below starts to get too far away as the window width is reduced and the images scale down. 2. For the bounty you need to make the jsFiddle work. It seems that even though I have transition: all , all of

Ghost Top Body Margin With Floated Divs

由 浪子不回头ぞ 提交于 2019-12-13 15:29:53
问题 I wrote the following code and tried placing three left floated divs in a father containing div. For some reason, the body tag seems to have a ghost top margin, which is a property not defined in my code. However, if I remove the margin-bottom property of the containing div or apply a clearfix style to it, the top margin is gone. What causes the ghost top margin and how to fix it? Thx! Check the screenshots below: Original code: Margin-bottom removed: Clearfix style applied: This the original

How do I add a margin to a CSS webkit scrollbar?

由 佐手、 提交于 2019-12-13 12:26:25
问题 Here's my site with the current webkit scrollbar: http://willwhitehead.com I'd like to create a gap between the scrollbar and the right edge of the screen. How do I achieve this? Thanks in advance, Will 回答1: There's yet another solution which might fit easily in everybody's project. If you use a transparent border as a margin and a box-shadow with inset to set it's color, you'd get the result you are hoping for. For instance: ::-webkit-scrollbar { width: 10px; } ::-webkit-scrollbar-track {

前端学习（94）：css重置样式

由 守給你的承諾、 提交于 2019-12-13 10:52:07
CSS Reset，意为重置默认样式。HTML中绝大部分标签元素在网页显示中都有一个默认属性值，通常为了避免重复定义元素样式，需要进行重置默认样式（CSS Reset）。举几个例子： 1.淘宝（CSS Reset）： html { overflow-x:auto; overflow-y:scroll; } body, dl, dt, dd, ul, ol, li, pre, form, fieldset, input, p, blockquote, th, td { font-weight:400; margin:0; padding:0; } h1, h2, h3, h4, h4, h5 { margin:0; padding:0; } body { background-color:#FFFFFF; color:#666666; font-family:Helvetica,Arial,sans-serif; font-size:12px; padding:0 10px; text-align:left; } select { font-size:12px; } table { border-collapse:collapse; } fieldset, img { border:0 none; } fieldset { margin:0; padding:0; }

Adding margins between elements cause element to start a new line

由 爷，独闯天下 提交于 2019-12-13 09:26:53
问题 I created my own responsive web design grid with 12 columns (like bootstrap) and every row in this grid takes a 100% of the grid. In my html file I have three sections of which every section takes 33.33% of the page, 100% in total. When I try to add margins between those sections, the last section in line jumps to new line. I know that bootstrap uses offset classes to solve this issue, but I'm trying to implement a solution with my own responsive web design grid. You can see the preview of
订阅 margin