css

问题 I know of two different ways of setting opacity in HTML: <div opacity="0.5"></div> and <div style="opacity: 0.5;"></div> I also know how to set both of those in JavaScript: div.setAttribute("opacity", 0.5); and div.style.opacity = 0.5 Are there any major differences between those two methods? Should I prefer one over the other? (I guess I should at least be consistent) 回答1: The only opacity attribute I am aware of is for use with SVGs: Example Elements The following elements can use the

问题 This question already has answers here : Make a div fill the height of the remaining screen space (34 answers) Closed 3 years ago . I want a desktop-like full-page width layout. Some menu at the top (uknown height, depending on the content), and div underneath that takes ALL the available space in viewport. div { padding: 0px } html, body { height: 100%; padding: 0px; margin: 0px; } .outer { background: olive; height: 100%; } .menu { background: orange; } .should_fill_available_space {

问题 I am trying to create horizontal forms with simple-form and bootstrap. I have already installed bootstrap using "rails generate simple_form:install". This is what i have in html.erb <%= simple_form_for(@company, :html => { :class => "form-horizontal" }) do |f| %> <div class="form-group"> <label class="col-md-4 control-label"></label> <div class="col-md-4"> <%= f.input :name %> </div> </div> But the form still appears vertically. 回答1: simple_form is a really great gem for generating bootstrap

问题 I am trying to create horizontal forms with simple-form and bootstrap. I have already installed bootstrap using "rails generate simple_form:install". This is what i have in html.erb <%= simple_form_for(@company, :html => { :class => "form-horizontal" }) do |f| %> <div class="form-group"> <label class="col-md-4 control-label"></label> <div class="col-md-4"> <%= f.input :name %> </div> </div> But the form still appears vertically. 回答1: simple_form is a really great gem for generating bootstrap

问题 Edge doesn't support CSS mask, yet the @supports statement below is calculating as true and the enclosed styles are being applied in Edge. What can I put into the @supports argument to get Edge to ignore the conditional block body { font-family: monospaced; color: red; background-image: url(test.png); } @supports(mask: url("")) { body { background-color: #eee; font-family: sans-serif; color: rebeccapurple; mask: url(test.svg); mask-size: cover; } } <h3>This should be red and mono-spaced in

问题 This question already has answers here : Closed 8 years ago . Possible Duplicate: How to create a <style> tag with Javascript I write a dynamic form using java-script. I want to add the style in java-script itself. I write some code to add a style. But it is not working.This is the code am write in my project. var sheet = document.createElement('style'); sheet.type="text/css"; sheet.innerHTML = "body{color:red;}"; document.body.appendChild(sheet); Anyone help me please. 回答1: Your code is fine

问题 To avoid path-relative style sheet import vulnerabilities should I attach css file on my page using full path e.g. <link href="http://mywebsite/style.css" type="text/css" rel="stylesheet" /> instead of <link href="style.css" type="text/css" rel="stylesheet" /> What do you think? 回答1: Just add a leading slash and make the path root-relative, rather than relative which this vulnerability relies on. No need for the domain / scheme. <link rel="stylesheet" href="/style.css"> 来源： https:/

问题 Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers. Want to improve this question? Update the question so it's on-topic for Stack Overflow. Closed 7 years ago . Improve this question CSS * { margin: 0px; padding: 0px; } html { margin: 0px; padding: 0px; } body { line-height: 1; margin: 0px; padding:0px; background:url("../images/22.jpg") scroll center top #16202C; /* box-shadow: 0 0 225px rgba(0, 0, 0, 0.45) inset; -webkit-box-shadow: 0 0

问题 Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers. Want to improve this question? Update the question so it's on-topic for Stack Overflow. Closed 7 years ago . Improve this question CSS * { margin: 0px; padding: 0px; } html { margin: 0px; padding: 0px; } body { line-height: 1; margin: 0px; padding:0px; background:url("../images/22.jpg") scroll center top #16202C; /* box-shadow: 0 0 225px rgba(0, 0, 0, 0.45) inset; -webkit-box-shadow: 0 0

问题 My website hosts a lot of images of all sizes. These images are responsive and change size at all browser widths from desktop to mobile. I see in my Google Search Console that I have a poor CLS (cumulative layout shift) of .25s. The layout of my website shifts as the images load. Since my images are responsive, I can't specify exact sizes of the images, or have placeholders to reserve the space. What is a modern way to prevent CLS with responsive images? Layout here: https://jsfiddle.net